父组件:

<template><div class="home"><tom /><jerray /></div>
</template><script>
// @ is an alias to /src
import Tom from '@/components/eventbus/tom.vue'
import Jerray from '@/components/eventbus/jerray.vue'
export default {name: 'Home',components: {Tom,Jerray}
}
</script>

平级的两个子组件

目录：

事件中心：

tom：

<template><div><div>Tom</div><div>{{num}}</div><button @click="handle">点击</button></div>
</template>
<script>
import eventBus from './eventbus'
export default {name: 'Tom',components: {},props: {},data () {return {num: 0,dataTom: 11111}},watch: {},computed: {},methods: {handle () {eventBus.$emit('jerray-event', this.dataTom)}},created () {},mounted () {// 监听事件eventBus.$on('tom-event', (val) => {this.num = val})}
}
</script>
<style lang="less" scoped>
</style>

jerray：

<template><div><div>jerray</div><div>{{num}}</div><button @click="handle">点击</button></div>
</template>
<script>
import eventBus from './eventbus'
export default {name: 'Jerray',components: {},props: {},data () {return {num: 0,dataJerray: 222222}},watch: {},computed: {},methods: {handle () {eventBus.$emit('tom-event', this.dataJerray)}},created () {},mounted () {// 监听事件eventBus.$on('jerray-event', (val) => {this.num = val})}
}
</script>
<style lang="less" scoped>
</style>

机制思考

用vue实例来作为事件中心： 这一处其实不明白，但是肯定有用它的道理，哦哦哦，他喵的，去接杯水的功夫回来有了点思考，为啥呢，因为要用到$emit来触发事件呀，谁有$emit，必然是vue实例呀

eventBus.$on 就是往事件中心上添加一个事件，然后以及事件触发的操作，类似于addEventListener用法。

然后就是利用$emit来触发这个事件。 这个其实就很巧妙了，这个$emit ，是怎么做到可以这样使用，又可以在父子组件中，子组件触发父组件的方法的呢？