Vue中独立组件之间数据交互

独立组件之间数据交互：通过自定义事件

组件A中的【数据】，传递给组件B

1.创建组件A，组件B
2.组件B在实例创建完成时就开始监听事件【等待接收数据】:钩子
3.组件A中触发事件，发送数据

注意：接收数据的函数，一定要绑定在生命周期创建钩子上（created:function(){}）
1、引入相应的文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

2、Dom文件

<div id="app">
    <comp-a></comp-a>
    <comp-b></comp-b>
</div>

 

3、js的相关内容

<script>
    Vue.component("compA", {
        template:"<button @click='test'>组件A中，触发事件</button>",
        methods:{
            test:function() {
                bus.$emit("myevent", this.username);//$emit("事件名称",[参数列表])通过$emit在代码中触发一个事件
            }
        },
        data:function() {
            return {
                username:"jerry"
            }
        }
    });
    Vue.component("compB", {
        template:"<h2>{{ds}}</h2>",
        created:function() {/*这是实例创建完成时自动调用的生命周期钩子*/
            var that = this;
            bus.$on("myevent", function(msg) {//通过$on("事件名称",function(参数列表){})来监听一个事件是否进行处理
                // 接收到数据之后，就可以更新组件中使用的数据，然后展示到页面上
                console.log("接收到其他组件传递的数据：" + msg);
                that.ds = msg;
            });
        },
        data:function() {
            return {
                ds:"hello"
            }
        }
    });

    /*定义一个消息分发中间件*/
    var bus = new Vue();

    var vm = new Vue({
        el:"#app"
    });
</script>