vue2.0 .vue文件非父子组件传值问题

前一篇我们谈过这个问题，在上一篇中我们是在main.js中定义空的bus.大家如果自己写个简单的demo是可以实现的，但是在项目中如果有路由存在的话，则会失效！那么在有路由的情况下如何在非父子组件中传值呢？

首先我们还是得看官网的api;vue官网指出你可以使用一个空vue实例作为事件中央线！也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用

$emit

获取

$on

的数据参数，实现组件通信

那么接下来我们可以创建一个公共实例文件bus.js

#bus.js作为中央数据总线

import Vue from "vue";
export default new Vue();

组件 second.vue

#second.vue

import Bus from '../bus.js';
export default {
name: 'foo',
data () {
return {
foo: 'Foo component',
msg: 'I come from second'
}
},
mounted:function(){
var _this=this;
Bus.$on('txt',function(msg){//监听first组件的txt事件
_this.msg = msg ;
console.log(_this.msg);
});
}
}

3.组件 first.vue

#first.vue

import Bus from '../bus.js';
export default {
name: 'bar',
data () {
return {
msg: 'I come from first'
}
},
methods:{
add(){// 定义add方法，并将msg通过txt传给second组件
Bus.$emit('txt',this.msg);
this.msg='';
}
}
}

希望对你有帮助，~~溜了~

欢迎加入前端交流群496522155，备注：前端

希望对你有帮助，~溜了~