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>