vue2.0弃用$dispatch和$broadcast

Posted 2020-10-07 胡卓

$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。

因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。

对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。

这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 v-on监听子组件上 $emit 的变化。这可以允许你很方便的添加事件显性。

然而，如果是跨多层父子组件通信的话，$emit 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。

比如，假设我们有个 todo 的应用结构如下：

Todos |-- NewTodoInput |-- Todo |-- DeleteTodoButton

可以通过单独的事件中心管理组件间的通信：

// 将在各处使用该事件中心
// 组件通过它来通信
var eventHub = new Vue()

然后在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件：

// NewTodoInput
// ...
methods: {
addTodo: function () {
eventHub.$emit(‘add-todo‘, { text: this.newTodoText })
this.newTodoText = ‘‘
}
}

　　

// Todos
// ...
created: function () {
eventHub.$on(‘add-todo‘, this.addTodo)
eventHub.$on(‘delete-todo‘, this.deleteTodo)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
eventHub.$off(‘add-todo‘, this.addTodo)
eventHub.$off(‘delete-todo‘, this.deleteTodo)
},
methods: {
addTodo: function (newTodo) {
this.todos.push(newTodo)
},
deleteTodo: function (todoId) {
this.todos = this.todos.filter(function (todo) {
return todo.id !== todoId
})
}
}

　　

 

// DeleteTodoButton
// ...
methods: {
deleteTodo: function (id) {
eventHub.$emit(‘delete-todo‘, id)
}
}

　　

在简单的情况下这样做可以替代 $dispatch 和 $broadcast，但是对于大多数复杂情况，更推荐使用一个专用的状态管理层如：Vuex。

升级方式

运行迁移工具找出使用 $dispatch 和 $broadcast的实例.

以上是官方给出的解决方案，有点晦涩难懂，接下来是一个易懂的例子

1、新建一个bus.js

import Vue from ‘vue‘

export var bus = new Vue()

2、App.vue里created方法里定义事件

import { bus } from ‘bus.js‘
// ...
created () {
  bus.$on(‘tip‘, (text) => {
    alert(text)
  })
}

3、test.vue组件内调用

import { bus } from ‘bus.js‘
 // ...
bus.$emit(‘tip‘, ‘123‘)