标签：使用 console 场景 target www. https export 作用 import
Vue2.0提供了Vuex进行非父子组件之间的通信，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。
实现代码示例：
<div id="app"> <c1></c1> <c2></c2> </div>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js Vue.component(‘c1‘,{ //这里以全局组件为例，同样，单文件组件和局部组件也同样适用 template:‘<div>{{msg}}</div>‘, data: () => ({ msg: ‘Hello World!‘ }), created() { Bus.$on(‘setMsg‘, content => { //监听Vue示例 Bus 的某一个事件 this.msg = content; }); } }); Vue.component(‘c2‘,{ template: ‘<button @click="sendEvent">Say Hi</button>‘, methods: { sendEvent() { Bus.$emit(‘setMsg‘, ‘Hi Vue!‘); //触发vue示例 bus 的某一个事件，并且将参数作为数据传过去 } } }); var app= new Vue({ el:‘#app‘ })
在实际运用中，一般将Bus抽离出来:
// Bus.js import Vue from ‘vue‘ const Bus = new Vue() export default Bus
组件调用时先引入
// 组件1 import Bus from ‘./Bus‘ export default { data() { return { ......... } }, methods: { .... Bus.$emit(‘log‘, 120) }, }
// 组件2 import Bus from ‘./Bus‘ export default { data() { return { ......... } }, mounted () { Bus.$on(‘log‘, content => { console.log(content) }); } }
但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信
（1）直接将Bus注入到Vue根对象中
import Vue from ‘vue‘ const Bus = new Vue() var app= new Vue({ el:‘#app‘, data:{ Bus } })
在子组件中通过this.$root.Bus.$on()、this.$root.Bus.$emit()来调用
（2）在一个教程视频中看过，也可以通过将Bus放在vue示例的原型对象中使用
Vue.prototype.bus = new Vue();
每个组件都是一个Vue示例，所以每个组件都会有bus属性，在组件中可以通过 this.bus.$emit、this.bus.$on 来调用
Vue.component(‘c2‘,{ template: ‘<button @click="sendEvent">Say Hi</button>‘, methods: { sendEvent() { this.bus.$emit(‘setMsg‘, ‘Hi Vue!‘); } } });
参考：https://www.cnblogs.com/fanlinqiang/p/7756566.html
标签：使用 console 场景 target www. https export 作用 import
原文地址：https://www.cnblogs.com/wenxuehai/p/10509839.html
