Vue兄弟组件通信的三种方式

cvSoldier

一、子传父,然后父传子

二、Vuex

三、创建一个事件总线

前两种方式官方文档十分详尽不再赘述,只在这里简述一下第三种方式的思路。
因为$on和$emit的事件必须是在一个公共的实例上才能触发。那么我们可以新建一个Vue实例当作事件总线,达到可以不管组件之间的父子关系,都能通过这个实例通信的目的
事件总线eventBus

1、新建eventBus.js

import Vue from 'vue'

export default new Vue()

2、Component1.vue里监听事件

import eventBus from './eventBus'
//...
created () {
  eventBus.$on('my-event', args => {
  //...
  }) 
}

3、Component2.vue中触发事件

import eventBus from './eventBus'
//...
watch: {
  list(newValue, oldValue) {
    eventBus.$emit('my-event', newValue)
  }
}

四、完

阅读 26.6k

cvSoldier前端
前端笔记、踩坑、个人理解

原地tp

113 声望
12 粉丝
0 条评论

原地tp

113 声望
12 粉丝
文章目录
宣传栏