非父子组件的通信

非父子组件之间的通信

方法一：使用一个空的 Vue 实例作为事件总线

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('函数名', 数据)
// 在组件 B 创建的钩子中监听事件
bus.$on('函数名', function (参数) {
  // ...
})
注意这个2个事件触发的时机，触发之前必须要监听

例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞父子组件通信</title>
    <script src="../js/vue/vue.js"></script>
</head>


<body>
    <div id="myApp">
       <my-a></my-a>
       <my-b></my-b>
       <my-c></my-c>
    </div>
    <template id="a">
        <div>
            <div>
             a组件{{name}}
            </div>
            <button @click="send">发送数据给c组件</button>
        </div>
       
    </template>
    <template id="b">
        <div>
            b组件{{age}}
        </div>
    </template>
    <template id="c">
        <div>
            c组件{{name}}
        </div>
    </template>
</body>
<script>
    // 创建一个空的vue实例
    var Event = new Vue();
    var A = {
        template:'#a',
        data:function(){
            return　{
                name:'路飞'
            }
        },
        methods:{
            send:function(){
                // 触发组件 A 中的事件，发送数据
                Event.$emit('a-data',this.name);
            }
        }
    }
    var B ={
        template:'#b',
        data:function(){
            return {
                age:18
            }
        }
    }
    var C ={
        template:'#c',
        data:function(){
            return {
                name:'',
            }
        },
        mounted:function(){
           var vm =this;
           // 接收数据
           Event.$on('a-data', function(name){
              vm.name=name;//此处的this指向为Event，注意缓存起C的this，如果用箭头函数也可以，（箭头函数不改变this）
            })
           
       }
    }
    let vm = new Vue({
        el:"#myApp",
        data:{
        },
        components:{
            'my-a':A,
            'my-b':B,
            'my-c':C,
        },
        
    })
</script>
</html>
注意：Event.$on()该方法，里面的this指向改变

非父子组件的通信

非父子组件之间的通信

方法一：使用一个空的 Vue 实例作为事件总线

推荐阅读更多精彩内容