vue非父子组件通信
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue非父子组件通信相关的知识，希望对你有一定的参考价值。
关于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
}
});
以上是关于vue非父子组件通信的主要内容，如果未能解决你的问题，请参考以下文章