element emitter broadcast向下广播 dispatch向上分派

2023-11-23 11:45

本文主要是介绍element emitter broadcast向下广播 dispatch向上分派,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

emitter
项目使用element的emitter.js,做个使用记录

function broadcast(componentName, eventName, params) {this.$children.forEach(child => {const name = child.$options.name;if (name === componentName) {child.$emit.apply(child, [eventName].concat(params));} else {// todo 如果 params 是空数组,接收到的会是 undefinedbroadcast.apply(child, [componentName, eventName].concat([params]));}});
}
export default {methods: {dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root;let name = parent.$options.name;while (parent && (!name || name !== componentName)) {parent = parent.$parent;if (parent) {name = parent.$options.name;}}if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);}}
};

Element dispatch 和 broadcast 都是 JavaScript 中的事件相关概念,但它们有些不同:
Element dispatch 是用于在特定的 HTML 元素上分派(即发起)自定义事件的过程。只有特定的元素会收到这些事件。
Broadcast 是一种在整个页面(或文档)上广播事件并在其所有子元素中调用处理程序的方式。在这种情况下,父元素会将事件传递给其子元素,直到找到一个可以处理该事件的元素。
在 Element dispatch 中,事件只会被处理它所分派到的元素。而 Broadcast 则会在所有子元素中调用处理程序,所以在一个具有多层嵌套元素的页面上,可能会有多个元素响应同一个 broadcast 事件。

注意:emitter的node包,是支持兄弟组件通信的

call与apply的区别:
call()和apply()这两个方法的作用可以简单归纳为改变this指向,从而让我们的this指向不在是谁调用了函数就指向谁。

call()方法的作用和 apply() 方法类似,区别就是 call()方法接受的是 参数列表,而 apply()方法接受的是 一个参数数组。

function.call( thisArg,  arg1,  arg2, ...)
func.apply( thisArg, [argsArray])

这篇关于element emitter broadcast向下广播 dispatch向上分派的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/417721

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

浅谈java向上转型和乡下转型

首先学习每一种知识都需要弄明白这知识是用来干什么使用的 简单理解:当对象被创建时,它可以被传递给这些方法中的任何一个,这意味着它依次被向上转型为每一个接口,由于java中这个设计接口的模式,使得这项工作不需要程序员付出任何特别的努力。 向上转型的作用:1、为了能够向上转型为多个基类型(由此而带来的灵活性) 2、使用接口的第二个原因却是与使用抽象基类相同,防止客户端创建该类的对象,并确保这仅仅

leetcode#496. Next Greater Element I

题目 You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of nums2. Find all the next greater numbers for nums1’s elements in the corresponding places of nums

android面试:如何理解 Android 中的广播?

在 Android 中,广播是一种用于在应用程序之间传递消息的机制。它允许应用程序发送和接收全局消息,通常用于通知其他应用或组件某些事件的发生。广播可以是系统广播(由系统发送)或自定义广播(由应用程序发送)。 广播的主要特点: 异步通信:广播是一种异步的通信方式,发送广播的应用不需要等待接收应用的响应。 全局可见:广播可以被系统中的任何应用程序接收,适合用于跨应用的消息传递。 轻量级:广播

element-ui打包之后图标不显示,woff、ttf加载404

1、bug 起因 昨天在 vue 项目中编写 element-ui 的树形结构的表格,发现项目中无法生效,定位问题之后发现项目使用的 element-ui 的版本是 2.4.11 。看了官方最新版本是 2.15.14,然后得知 2.4.11 版本是不支持表格树形结构的。于是决定升级 element-ui 的版本,方便后续的开发。 升级之后本地简单的过了一遍系统功能,并没有发现有什么不妥,于

Android 接收系统广播,开机启动Service,SMS,Battery

本文内容摘自《疯狂Android讲义 第3版》李刚 著 自动开启的Service: package shortcut.song.com.myapplication;import android.app.Service;import android.content.Intent;import android.os.Binder;import android.os.IBinder;im

Android Ordered Broadcast 有序广播

代码设置IntentFilter: IntentFilter intentFilter = new IntentFilter();intentFilter.setPriority(15);intentFilter.addAction("shortcut.song.com.myapplication.MY_BROADCAST");intentFilter.addCategory

Android BroadcastRecevier广播消息

代码注册Receiver @Overrideprotected void onCreate(Bundle savedInstanceState) {IntentFilter intentFilter = new IntentFilter();intentFilter.addAction("");MyBroadcast myBroadcast = new MyBroadcast();regi

Flink使用Broadcast State实现流处理配置实时更新

大数据技术与架构 点击右侧关注,大数据开发领域最强公众号! 暴走大数据 点击右侧关注,暴走大数据! 本文作者时延军发表在http://shiyanjun.cn,如果你也在使用Broadcast State,那么可以参考一下。 Broadcast State是Flink支持的一种Operator State。使用Broadcast State,可以在Flink程序的一个Stream中输入数