标签：imp bsp gui body function 多层 状态 ble 使用
$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‘)
标签：imp bsp gui body function 多层 状态 ble 使用
原文地址：http://www.cnblogs.com/huzhuo/p/7554429.html
