vue2.0弃用$dispatch和$broadcast

Posted 胡卓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0弃用$dispatch和$broadcast相关的知识,希望对你有一定的参考价值。

$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‘)

  

以上是关于vue2.0弃用$dispatch和$broadcast的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 broadcast和dispatch的理解

vue2.0 中#$emit,$on的使用详解

在vue2.0中用dispatch和commit来调用mutations有啥区别

Vue组件通信之Bus

vue2.0中eventBus实现兄弟组件通讯

vue2.0s中eventBus实现兄弟组件通信