5-6 组件及组件间的通信-非父子组件间的通信

目录：

  •  非父子组件间的通信
  • 非父子组件间的通信原理图

一、非父子组件间的通信

非父子组件的通信，可以通过一个空的 Vue实例作为中央事件总线(事件中心)，用它来触发和监听事件。

其实有时候两个组件需要通信(非父子关系)。在简单的场景下，可以使用一个空的Vue实例操作为中央事件总线：

var  bus = new Vue()  //空的Vue实例操作为中央事件总线

 

// 触发组件 A 中的时间
bus.$emit('id-selected', 1)

 

// 在组件 B 创建的钩子 中监听事件
bus.$on('id-selected', function(id){
     // ...
})

在复杂的情况，我们应该考虑使用专门的  状态管理模式。

二、非父子组件间的通信原理图

这边有两个全局变量： vm.$emit  :发送数据  vm.$on : 接收数据

实际代码如下：

<body>
    <div id="box">
        <my-a></my-a>
        <hr>
        <my-b></my-b>
    </div>

    <template id="a">
        <div>
            <h3>A组件：{{name}}</h3>
            <button @click="send">将数据发送给B组件</button>
        </div>
    </template>
    <template id="b">
        <div>
            <h3>B组件:{{name}}，{{age}}</h3>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>

        //定义一个空的Vue实例
        var Event = new Vue();

        var A = {
            template: "#a",
            data(){
                return {
                    name: 'tom'
                }
            },
methods:{
    send(){
        Event.$emit('data-a',this.name);
    }
}
        };

        var B = {
            template: "#b",
            data(){
                return {
                    name: '',
                    age: 20
                }
            },
            mounted(){ //在模板编译完成后执行
                Event.$on('data-a',name => { //这边只能用箭头函数(=>),而不是function(name)
                    this.name = name;
                });
            }
        };

        var vm = new Vue({
            el: '#box',
            components:{
                'my-a':A,
                'my-b':B
            }
        });
    </script>
</body>
非父子组件之间通信

 

posted @ 2020-03-13 16:52  帅丶高高  阅读(234)  评论(0)    收藏  举报