游戏人日常 2019-07-01
前两种方式官方文档十分详尽不再赘述,只在这里简述一下第三种方式的思路。
因为$on和$emit的事件必须是在一个公共的实例上才能触发。那么我们可以新建一个Vue实例当作事件总线,达到可以不管组件之间的父子关系,都能通过这个实例通信的目的
import Vue from 'vue' export default new Vue()
import { eventBus } from 'eventBus.js' //... created () { eventBus.$on('my-event', args => { //... }) }
import { eventBus } from 'eventBus.js' //... watch: { list(newValue, oldValue) { eventBus.$emit('my-event', newValue) } }
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT