Vue.js 非父子组件之间的通讯
在一些非父子组件会经常用到互相之间的通讯功能，Vue.js 有 vuex 状态管理模式，但是非大型的项目也就不需要使用它，这会增加其难度的。官网介绍的一种方式是使用一个空 Vue 实例作为中央事件总线。
那么在 vue-cli 项目中可以这样使用：
main.js
// main.js 文件
import Vue from 'vue'
...
Vue.prototype.bus = new Vue({})
App.vue
<template>
<c1></c1>
<c2></c2>
</template>
<script>
import c1 from '@/components/c1'
import c2 from '@/components/c2'
...
components: {
c1,
c2
}
...
</script>
c1.vue
<template>
<div id="app">
C1计数：{{fooCount}}
<br>
<button @click="countC2">点击会修改C2的计数</button>
</div>
</template>
<script>
export default {
data () {
return {
fooCount: 0
}
},
mounted () {
this.bus.$on('countC1', (num) => {
this.fooCount += num
})
},
methods: {
countC2 () {
this.bus.$emit('countC2')
}
}
}
</script>
<style lang="sass">
</style>
c2.vue
<template>
<div id="app">
C2计数：{{barCount}}
<br>
<button @click="countC1">点击会修改C1的计数</button>
</div>
</template>
<script>
export default {
data () {
return {
barCount: 0
}
},
mounted () {
this.bus.$on('countC2', () => {
this.barCount++
})
},
methods: {
countC1 () {
this.bus.$emit('countC1', 91)
}
}
}
</script>
<style lang="sass">
</style>
