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