Vue2传递信息汇总

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