Vue兄弟组件通信的三种方式
一、子传父,然后父传子
二、Vuex
三、创建一个事件总线
前两种方式官方文档十分详尽不再赘述,只在这里简述一下第三种方式的思路。
因为$on和$emit的事件必须是在一个公共的实例上才能触发。那么我们可以新建一个Vue实例当作事件总线,达到可以不管组件之间的父子关系,都能通过这个实例通信的目的
1、新建eventBus.js
import Vue from 'vue' export default new Vue()
2、Component1.vue里监听事件
import { eventBus } from 'eventBus.js' //... created () { eventBus.$on('my-event', args => { //... }) }
3、Component2.vue中触发事件
import { eventBus } from 'eventBus.js' //... watch: { list(newValue, oldValue) { eventBus.$emit('my-event', newValue) } }
四、完
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21