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 >
    <comp-a></comp-a>
    <comp-b></comp-b>
</div>

3、js的相关内容

 1 <script>
 2     Vue.component("compA", {
 3         template:"<button @click='test'>组件A中，触发事件</button>",
 4         methods:{
 5             test:function() {
 6                 bus.$emit("myevent", this.username);//$emit("事件名称",[参数列表])通过$emit在代码中触发一个事件
 7             }
 8         },
 9         data:function() {
10             return {
11                 username:"jerry"
12             }
13         }
14     });
15     Vue.component("compB", {
16         template:"<h2>{{ds}}</h2>",
17         created:function() {/*这是实例创建完成时自动调用的生命周期钩子*/
18             var that = this;
19             bus.$on("myevent", function(msg) {//通过$on("事件名称",function(参数列表){})来监听一个事件是否进行处理
20                 // 接收到数据之后，就可以更新组件中使用的数据，然后展示到页面上
21                 console.log("接收到其他组件传递的数据：" + msg);
22                 that.ds = msg;
23             });
24         },
25         data:function() {
26             return {
27                 ds:"hello"
28             }
29         }
30     });
31 
32     /*定义一个消息分发中间件*/
33     var bus = new Vue();
34 
35     var vm = new Vue({
36         el:"#app"
37     });
38 </script>