Vue2传递信息汇总

来源：互联网发布：中国投资咨询公司知乎编辑：程序博客网时间：2024/06/07 05:53

Vue2项目传递信息汇总

一：父组件传递信息给子组件

1、引入组件

<script>import fansSelect from '../com_module/fans/fans_select.vue';export default {    components: {        fansSelect    }}</script><fans-select :fanData="fanData" :checkId="4444" ></fans-select>2、子组件获取信息template>   <div>{{checkId}}</div></template><script>export default {    props: ['checkId']  //传递多个信息 props:['ddd','ffff']   }</script><style scoped src="./fans_select.css">

二：子组件传递信息给父组件

1、子组件定义传递信息

<template>    <div @change="check()">       eeeee    </div></template><script>export default {    methods:{        check:function(){            this.$emit('checkUser','ee');        }    }}</script><style scoped src="./fans_select.css">

2、父组件获取信息

<fans-select  @checkUser="checkUser"></fans-select><script>    import fansSelect from '../com_module/fans/fans_select.vue';    export default {        data () {                return {                   aaa:'ww'                }          },       methods:{        checkUser:function(data){   //发送的内容           this.aaa=data;        },       }        components: {            fansSelect        }    }</script

二：路由专递信息（query）

1、定义

<router-link :to="{path: '/fans/massmessage', query: {shareIndex: this.shareIndex}}"  class="send_btn">更多查询</router-link>this.$router.push({path: '/fans/massmessage', query: {shareIndex: this.shareIndex}});

2、获取

this.$route.query.shareIndex

二：路由专递信息（params）

1、定义

{ path: 'ordersdetails/:ordersId',component: ordersDetails,meta: {title: '订单详情'}},//在路由中定义<router-link v-show="bottomShow"  :to="{ path:'/index/ordersdetails/1', query: {invoice:invoice}}" class="send_btn">查看物流</router-link>

2、获取

this.$route.params.ordersId

二：全局专递信息

通过eventBus传递数据
a、使用前可以在全局定义一个eventBus
window.eventBus = new Vue();
b、在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）
eventBus.$emit('eventBusName', id);
c、在需要接受参数的组件重，用on接受该值（或对象）
eventBus.$on('eventBusName', function(val) {<br> 　　console.log(val)<br>})
d、最后记住要在beforeDestroy()中关闭这个eventBus
eventBus.$off('eventBusName');

参考博客：http://www.cnblogs.com/ygtq-island/p/6728137.html

阅读全文

0 0