vue组件通信

# vue 组件通信

组件间通信的分类可以分成以下四种情况：

父子组件之间的通信
兄弟组件之间的通信
跨级（祖孙与后代）组件之间的通信
非关系组件间之间的通信

# 1. `$emit`和 `props`

适用场景：父子组件通信

# 2. `$parent`和`$children`

适用场景：父子、跨级组件通信

# 3. `provide` 和 `inject`

适用场景：跨级组件通信

provide 和 inject 绑定不是响应的，它被设计是为组件库和高阶组件服务的，平常业务中的代码不建议使用。

# 4. `$attrs`和`$listeners`

适用场景：跨级组件通信

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。（父传孙专用）

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。（孙传父专用）

# 5. eventBus 中央事件总线

适用场景：父子、兄弟、跨级，非关系组件通信

使用场景：对于比较小型的项目，没有必要引入 vuex 的情况下，可以使用 eventBus

实现原理：

EventBus 是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。

on('name', fn) 订阅消息，name:订阅的消息名称， fn: 订阅的消息

emit('name', args) 发布消息, name:发布的消息名称， args：发布的消息

实现：

class Bus {
  constructor() {
    this.callbacks = {};
  }

  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注：只不过在 vue 中已经替我们实现好了$emit,$on 这些方法，所以直接用的时候去 new Vue()就可以了.

缺点：

代码逻辑性极具下降，可阅读性变低
对于每一个 action 父组件都需要一个 on(或 dispatch)一个事件来处理
你将很难查找到每一个事件是从哪里触发，满篇都是业务逻辑

# 6. vuex

适用场景：父子、兄弟、跨级，非关系组件通信

Vuex 状态管理的流程：view———>actions———–>mutations—–>state————>view

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。对一个中大型单页应用来说是不二之选。

更新时间: 12/15/2021, 5:49:44 PM

← vue2生命周期 vue修饰符→

vue组件通信