vue $dispatch 和 $broadcast 详解

在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性,主要用来实现基于组件树结构的事件通信。

$dispatch解析
dispatch是一个事件,首先会在自己实例本身上触发,然后沿父链向上传播。当它触发父组件上的事件侦听器时,传播会停止,除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。
dispatch接收两种参数:event 事件名称,[…args]触发事件时传递给回调函数的参数。
实例:

在这里插入代码片
// 创建一个 parent 组件
var parent = new Vue();

// 创建一个 child1 组件,其父组件指向 parent
var child1 = new Vue({ parent: parent });

// 创建一个 child2 组件,其父组件指向 child1
var child2 = new Vue({ parent: child1 });

// 在 parent 组件监听名为 test 的事件,并绑定了一个回调函数
parent.$on('test', function () {
  console.log('parent notified');
});

// 在 child1 组件监听名为 test 的事件,并绑定了一个回调函数
child1.$on('test', function () {
  console.log('child1 notified');
});

// 在 child2 组件监听名为 test 的事件,并绑定了一个回调函数
child2.$on('test', function () {
  console.log('child2 notified');
});
// 在 child2 组件中通过 dispatch 触发 test 事件
child2.$dispatch('test');

// 事件执行会输出如下结果
// -> "child2 notified"
// -> "child1 notified"

parent、child1 和 child2 三个组件之间的关系可以展示成如下的关系图

在这里插入图片描述

$broadcast解析
broadcast 是一个事件,它向下传播到当前实例的所有后代。由于后代扩展为多个子树,事件传播将会遵循许多不同的“路径”。 除非回调返回 true,否则在沿该路径触发侦听器回调时,每个路径的传播将会停止。
broadcast 会接收两中参数:event 是事件名称,[…args] 是触发事件时传递给回调函数的参数。
实例:

// 创建 parent 组件实例
var parent = new Vue()

// 创建 child1 组件实例,其父组件指向 parent
var child1 = new Vue({ parent: parent })

// 创建 child2 组件实例,其父组件指向 parent
var child2 = new Vue({ parent: parent })

// 创建 child3 组件实例,其父组件指向 child2
var child3 = new Vue({ parent: child2 })

// 在 child1 组件监听名为 test 的事件,并绑定了一个回调函数
child1.$on('test', function () {
  console.log('child1 notified')
})

// 在 child2 组件监听名为 test 的事件,并绑定了一个回调函数
child2.$on('test', function () {
  console.log('child2 notified')
})

// 在 child3 组件监听名为 test 的事件,并绑定了一个回调函数
child3.$on('test', function () {
  console.log('child3 notified')
})
parent.$broadcast('test')
// -> "child1 notified"
// -> "child2 notified"

parent、child1、child2 和 child3 四个组件之间的关系可以展示成如下的关系图:
在这里插入图片描述
以上是$dispatch 和 $broadcast在1.0中的详解。但是在vue2.0中,这两个属性已废弃。那么,对应的事件,由下向上,由上往下传递,如何解决?
官方文档:
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页