vue非父子组件通信

Posted 2020-10-12

关于vue非父子组件如何通信，今天做了一个基本的例子，记录下来。   使用一个空的vue实例作为事件的总线

 

html代码：

<div id="app">

   <a-component></a-component>    <b-component></b-component>

</div>

 

js代码：

 

var Event = new Vue();

var A = {                                                                   

template:‘<div @click="clickA">A要传参给B</div>‘,  

data:function(){

return{

a:‘这里是A传的参数‘

}

},  

methods:{        

clickA:function(){        

console.log(‘执行clickA...‘);        

Event.$emit(‘app-click‘,this.a);

}

}

};

var B = {        

template:‘<div>{{a}}</div>‘,  

data:function(){

return{

        a:‘--‘

}

},  

mounted:function(){    

console.log(‘mounted 钩子执行...‘);    

console.log(this.number);    

Event.$on(‘app-click‘,function(a){      

console.log(‘监听app-click...‘);

this.a= a;

}.bind(this));

}

};

var app = new Vue({        

el:‘#app‘,  

components:{

‘a-component‘: A,

‘b-component‘: B  

}

});