vue组件间通信的四种方法

0 四种方式

1. 父子传参
2. 事件总线 bus
3. provided/injected
4. Vuex

1 父子组件通信

父传子props, 子传父$emit

2 兄弟

通过父组件转发

老大->父组件->老二 (单向)

• One.vue 老大提交自定义事件

• Two.vue 老二接收参数

• App.vue 父组件监听自定义事件

3 表兄弟

3.1 介绍

全局事件总线bus (适合两个组件间通信, 没有明显关系的两个组件)

所有的组件都通过一个统一的全局对象通信

多个组件, 用vuex

3.2 事件总线用法

• bus/index.js

import Vue from 'vue'

// 这是一个Vue实例对象
const bus = new Vue()

export default bus

•  Counter.vue 发

•  Test.vue 收

4 祖孙组件通信

依赖注入 provided/injected (vue3直接是响应式)

1) 传静态数据

        1) 在祖先组件中通过 provid选项提供数据

        2) 在后代组件中通过injection选项注入数据

•  App.vue

// 父级组件提供 'foo'
export default {
  name: 'App',
  provide: {
    foo: 'hello'
  },
  // ...
}

• son.vue 

// 孙子组件注入 'foo'
export default {
  name: 'Son',
  inject: ['foo'],
  created () {
    console.log(this.foo) 
  }
}

2) 传响应式数据

传入对象

• App.vue 

• son.vue 

传入函数

•  App.vue

•  son.vue