vue 非父子组件通信
两个不相关的实例通信 需要第三方实例来完成通信
下面试 app app2 两个不相关的实例
bus实例为通信实例
app app2 之间的通信 需要依靠bus 来完成
例子中app 的点击事件会触发bus 的'example'监听事件,bus 的监听事件会对app2的pn值进行操作
从而实现了在不影响app与app2 基础上从app 传递信息到app2 的操作
<div id="app">
<div @click="addn">{{pn}}</div>
</div>
<div id="app2">
<div>{{ad}}</div>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
pn:10,
},
methods:{
addn:function(value){
this.pn+=1;
console.log(value);
bus.$emit('example',2);
}
}
});
var app2=new Vue({
el:"#app2",
data:{
pn:10,
},
computed:{
ad:function(){
return this.pn
}
},
methods:{
}
});
var bus=new Vue({
} );
bus.$on('example',function(value){
app2.pn+=value
})
</script>