Vue中的情侣属性调度和广播美元详解

调度和广播美元作为一对情侣& # 128145;属性,在Vue 1.0中主要用来实现基于组件树结构的事件流通信,通过向上或向下以冒泡的形式传递事件流,以实现嵌套父子组件的通信。但是由于其显功能缺陷,在Vue 2.0中就被移除了。虽然Vue官网已经不再支持使用调度和广播美元进行组件通信,但是在很多基于Vue的UI框架中都有对其的封装,包括element-ui, iview等等。
　　

那么调度和广播美元到底是怎么工作,其底层又是怎么实现的呢?接下来,我们就详细的说一说!

为了追根溯源,我们还是先去Vue 1.0的文档你观摩一下其概念吧!

<强>概念:

　　

调度事件,首先触发它>//创建一个父组件 　　var父母=new Vue ();//创建一个child1组件,其父组件指向父母 　　var child1=new Vue({父母:父母});//创建一个child2组件,其父组件指向child1 　　var child2=new Vue({父:child1});//在父组件监听名为测试的事件,并绑定了一个回调函数 　　的父母。在美元(“测试”,函数(){ 　　控制台。日志(“父通知”); 　　});//在child1组件监听名为测试的事件,并绑定了一个回调函数 　　child1。在美元(“测试”,函数(){ 　　控制台。日志(“child1通知”); 　　});//在child2组件监听名为测试的事件,并绑定了一个回调函数 　　child2。在美元(“测试”,函数(){ 　　控制台。日志(“child2通知”); 　　}); 　　 　　

说到这里,家长,child1和child2三个组件之间的关系可以展示成如下的关系图:

　　

　　 　　//在child2组件中通过派遣触发测试事件 　　child2。美元分派(测试);//事件执行会输出如下结果//癱hild2通知”//癱hild1通知” 　　 　　

当执行<代码> child2。美元分派(测试);> 　　

<强> 1.0 Vue官方实现

　　

1.0版在Vue本中,美元分派实现的源码放在/src/实例/api/事件。js文件中,代码很简单:
　　

　　 　　/* * 　　*递归地传播事件父链。 　　*递归地在父链上传播事件。 　　* @param{字符串}事件 　　* @param {…*}附加参数 　　*///美元派遣方法是定义在Vue的原型上的//接受一个字符串类型的事件名称 　　Vue.prototype。$分派=函数(事件){//首先执行发出美元触发事件,将返回值保存在shouldPropagate中 　　var shouldPropagate=美元发出。应用(这个参数)//如果首次执行美元的发出方法返回的值不是真的就直接返回//如果返回值不是真的就说明组件逻辑不希望事件继续往父组件进行传递 　　如果(! shouldPropagate)返回//如果首次执行发出美元方法返回值是真实的就获取当前组件的父组件实例 　　var=父母。父母美元//将函数接受的参数转换成数组 　　var args=toArray(参数)//使用事件对象来表示非源代码释放>//定义派遣方法,接受三个参数,分别是:组件名称,将要触发的事件名称,回调函数传递的参数 　　调度(componentName eventName params) {//获取基于当前组件的父组件实例,这里对父组件实例和根组件实例做了兼容处理 　　父母var=８改该涝獆 |。根美元;//通过父组件的选择美元属性获取组件的名称 　　var name=父母。options.componentName美元;//当相对当前组件的父组件实例存在,而且当父组件的名称不存在或者父组件的名称不等于传入的组件名称时,执行循环 　　而(父,,（！名字| |名字!==componentName)) {//记录父组件的父组件 　　父母=父母。父母美元;//当父组件的父组件存在时,获取祖父组件的名称 　　如果(父){ 　　name=父母。options.componentName美元; 　　} 　　}//当循环结束,是父母的值就是最终匹配的组件实例 　　如果(父){//当父值存在时调用美元发出方法//传入父母实例,事件名称与参数参数组成的数组//触发传入事件名称eventName同名的事件 　　父母。释放美元。应用(父,eventName .concat (params)); 　　} 　　} 　　 　　

<>强差异分析

Vue中的情侣属性调度和广播美元详解