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])

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/162433.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/162433.shtml
英文地址,請注明出處:http://en.pswp.cn/news/162433.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

pytorch訓練出現的bug

訓練過后發現.csv文件左側出現了幾列unname和一列0,1,2。這個時候在訓練就會從unname那一列開始訓練。我們需要把這幾列刪除,之后再重新訓練

華清遠見嵌入式學習——網絡編程——作業3

目錄 作業要求&#xff1a;基于UDP的TFTP文件傳輸 代碼 下載功能效果圖?編輯 上傳功能效果圖 思維導圖 模擬面試題和答案&#xff08;定期更新&#xff09; 作業要求&#xff1a;基于UDP的TFTP文件傳輸 完成文件的上傳和下載功能 代碼 #include<myhead.h>//實現…

前端Math屬性方法匯總集錦

Description of Math Math 是一個內置對象&#xff0c;它擁有一些數學常數屬性和數學函數方法。Math 不是一個函數對象。 Math 用于 Number 類型。它不支持 BigInt。 與其他全局對象不同的是&#xff0c;Math 不是一個構造器。Math 的所有屬性與方法都是靜態的。引用圓周率的寫…

『heqingchun-Ubuntu系統+x86架構+編譯安裝ffmpeg+帶有nvidia硬件加速』

Ubuntu系統x86架構編譯安裝ffmpeg帶有nvidia硬件加速 一、準備文件 注&#xff1a;可直接下載我上傳的CSDN資源&#xff0c;然后直接跳到"一"中的第"3"項"將文件按以下順序存放"。 ffmpeg源碼&#xff1a;音視頻開發ffmpeg編譯所需資源文件 其…

Pgsql常用命令

Postgresql數據庫常用命令 1、連接數據庫, 默認的用戶和數據庫是postgres psql -h host -p port -U user -d dbname 2、執行sql文件 psql -h ${PGHOST} -p ${PGPORT} -U ${PGUSER} -d safe_browser -f xxxx.sql \i /xxxxx/xxx/xxxxxx.sql 3、切換數據庫,相當于mysql的use d…

Ajax技

Ajax的特點 異步提交&#xff1a;Ajax采用異步通信方式&#xff0c;能夠在頁面無需重新加載的情況下向服務器發送請求并接收響應數據&#xff0c;提升了用戶體驗。無需插件&#xff1a;Ajax是基于標準瀏覽器的Javascript和XMLHttpRequest對象實現的&#xff0c;無需安裝插件或…

打開和關閉conda,激活和關閉conda,詳解退出conda環境

Python編程技巧&#xff1a;詳解退出conda環境 https://www.python100.com/html/110499.html # 創建虛擬環境~/anaconda3/bin/conda create -n name python3.6 # 激活虛擬環境 source ~/anaconda3/bin/activate name # 查看所有環境 conda env list # 激活虛擬環境 conda activ…

使用JVS低代碼表單引擎高效管理文件,實現個性化需求

在數字化、信息化的時代&#xff0c;文件上傳與管理功能已經成為了各類應用系統的標配。無論是在辦公自動化、項目管理還是內容管理系統中&#xff0c;我們都希望能輕松、高效地完成文件的上傳、查看和管理。JVS低代碼表單引擎提供了文件類組件。無論是文件類型、大小的限制&am…

ubuntu Setforeground 前臺應用切換

場景分析 有這樣一個系統&#xff0c;一個服務主進程用于接收指令&#xff0c;其它服務是獨立的gui 程序&#xff0c;服務進程根據命令將對應的gui 程序切換到前臺。 windows 平臺有Setforeground 這個api&#xff0c;可以根據進程ID&#xff0c;將某個應用的窗口切換到前臺。…

SpringBoot整合Redis,redis連接池和RedisTemplate序列化

SpringBoot整合Redis 1、SpringBoot整合redis1.1 pom.xml1.2 application.yml1.3 配置類RedisConfig&#xff0c;實現RedisTemplate序列化1.4 代碼測試 2、SpringBoot整合redis幾個疑問&#xff1f;2.1、Redis 連接池講解2.2、RedisTemplate和StringRedisTemplate 3、RedisTemp…

UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“

? 目錄 uniapp進行打包 使用上架工具appuplode進行發包 1.登錄appuploder軟件 2.登陸開發者App Store后臺 uniapp進行打包 在HBuilder X編輯器中打開需要打包的項目&#xff0c;然后點擊上面菜單欄中 發行 > 原生App-云打包&#xff0c;對以下彈出的彈窗進行內容填寫 ?…

競賽python區塊鏈實現 - proof of work工作量證明共識算法

文章目錄 0 前言1 區塊鏈基礎1.1 比特幣內部結構1.2 實現的區塊鏈數據結構1.3 注意點1.4 區塊鏈的核心-工作量證明算法1.4.1 拜占庭將軍問題1.4.2 解決辦法1.4.3 代碼實現 2 快速實現一個區塊鏈2.1 什么是區塊鏈2.2 一個完整的快包含什么2.3 什么是挖礦2.4 工作量證明算法&…

Java計算時間差,距結束還有幾天幾小時幾分鐘

文章目錄 1、寫法2、備份3、LocalDate、LocalDateTime、Date、String互轉 1、寫法 //靜態方法&#xff0c;傳入年月日時分秒 LocalDateTime startTime LocalDateTime.of(2023, 11, 22, 15, 09, 59); LocalDateTime endTime LocalDateTime.of(2023, 11, 30, 0, 0, 0); //計算…

Java基層衛生健康云綜合管理(云his)系統源碼

云HIS&#xff08;Cloud-Based Healthcare Information System&#xff09;是基于云計算的醫院健康衛生信息系統。它運用云計算、大數據、物聯網等新興信息技術&#xff0c;按照現代醫療衛生管理要求&#xff0c;在一定區域范圍內以數字化形式提供醫療衛生行業數據收集、存儲、…

indexedDB存儲

使用 setDBData({ id: name, value: 張三, expire: new Date().getTime() 10000 }, info, infoDB) console.log(getDBData(name, info, infoDB)); 添加或更新數據 async function setDBData(data,storeName "storeName",dbName "dbName",version ) {c…

educoder中Hive綜合應用案例 — 用戶搜索日志分析

第1關:2018年點擊量最高的10個網站域名 ---------- 禁止修改 ----------drop database if exists mydb cascade; ---------- 禁止修改 -------------------- begin ---------- ---創建mydb數據庫 create database mydb;---使用mydb數據庫 use mydb;---創建表db_search create…

CVE-2023-27524:Apache Superset未授權訪問漏洞復現

文章目錄 ?Apache Superset 未授權訪問漏洞(CVE-2023-27524)復現0x01 前言0x02 漏洞描述0x03 影響版本0x04 漏洞環境0x05 漏洞復現1.訪問漏洞環境2.漏洞復現 0x06 修復建議 ?Apache Superset 未授權訪問漏洞(CVE-2023-27524)復現 0x01 前言 免責聲明&#xff1a;請勿利用文…

在線工具收集

在線工具收集 1、在線P圖 https://www.photopea.com/ 一款類似于PS的在線摳圖軟件 ①去除圖片中的文字&#xff0c;并填充背景色 第一步&#xff1a;使用矩形選中要清除的文字 第二步&#xff1a;點擊編輯選擇填充 第三步&#xff1a;選擇內容識別&#xff0c;保留透明區域…

操作系統(七)| 設備管理-- 端口 驅動程序 基本I/O控制 磁盤I/O

文章目錄 1 設備管理概述1.1 系統總線結構1.2 設備控制器通用結構1.3 I/O設備的模型 2 I/O端口2.1 尋址方式 3 驅動程序4 基本I/O控制方式4.1 程序直接控制4.2 中斷I/O方式4.3 DMA方式4.4 I/O通道控制方式 5 I/O管理中的重要思想5.1 設備獨立性5.2 SPOOLing技術5.3 I/O軟件的多…

c語言 結構數組

為什么要使用結構數組&#xff1f; 例如有一種情況&#xff0c;我們需要存儲5名學生的數據。我們可以使用下面給出的結構來存儲它。 示例 #include<stdio.h> struct student { char name[20]; int id; float marks; }; void main() {struct student s1,s2,…