电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

詳解vue之自行實現派發與廣播(dispatch與broadcast)

瀏覽:3日期:2022-10-10 13:51:51
要解決的問題

主要針對組件之間的跨級通信

為什么要自己實現dispatch與broadcast?

因為在做獨立組件開發或庫時,最好是不依賴第三方庫

為什么不使用provide與inject?

因為它的使用場景,主要是子組件獲取上級組件的狀態,跨級組件間建立了一種主動提供與依賴注入的關系。然后有兩種場景它不能很好的解決:父組件向子組件(支持跨級)傳遞數據;子組件向父組件(支持跨級)傳遞數據。

代碼如下:

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 是空數組,接收到的會是 undefined broadcast.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); } }};

parent.vue

<template> <div> <h1>我是父組件</h1> <button @click='handleClick'>觸發事件</button> <child /> </div></template><script>import Emitter from '@/mixins/emitter.js';import Child from './child';export default { name: 'componentA', mixins: [Emitter], created() { this.$on('child-to-p', this.handleChild); }, methods: { handleClick() { this.broadcast('componentB', 'on-message', 'Hello Vue.js'); }, handleChild(val) { alert(val); } }, components: { Child }};</script>

child.vue

<template> <div>我是子組件</div></template><script>import Emitter from '@/mixins/emitter.js';export default { name: 'componentB', mixins: [Emitter], created() { this.$on('on-message', this.showMessage); this.dispatch('componentA', 'child-to-p', 'hello parent'); }, methods: { showMessage(text) { window.alert(text); } }};</script>

這樣就能實現跨級組件自定義通信了,但是,要注意其中一個問題:訂閱必須先于發布,也就是說先有on再有emit

父子組件渲染順序,實例創建順序

子組件先于父組件前渲染,所以在子組的mounted派發事件時,在父組件中的mounte中是監聽不到的。而父組件的create是先于子組件的,所以可以在父組件中的create可以監聽到

到此這篇關于詳解vue之自行實現派發與廣播(dispatch與broadcast)的文章就介紹到這了,更多相關vue 派發與廣播內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 量子管通环-自清洗过滤器-全自动反冲洗过滤器-北京罗伦过滤技术集团有限公司 | 软瓷_柔性面砖_软瓷砖_柔性石材_MCM软瓷厂家_湖北博悦佳软瓷 | 地图标注-手机导航电子地图如何标注-房地产商场地图标记【DiTuBiaoZhu.net】 | 【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 工作服定制,工作服定做,工作服厂家-卡珀职业服装(苏州)有限公司 | 康明斯发电机,上柴柴油发电机,玉柴柴油发电机组_海南重康电力官网 | 比士亚-专业恒温恒湿酒窖,酒柜,雪茄柜的设计定制 | 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | CNC机加工-数控加工-精密零件加工-ISO认证厂家-鑫创盟 | 新车测评网_网罗汽车评测资讯_汽车评测门户报道 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 热风机_工业热风机生产厂家上海冠顶公司提供专业热风机图片价格实惠 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 直线模组_滚珠丝杆滑台_模组滑台厂家_万里疆科技 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 昊宇水工|河北昊宇水工机械工程有限公司 | 电销卡_北京电销卡_包月电话卡-豪付网络 | 耐酸泵,耐酸泵厂家-淄博华舜耐腐蚀真空泵| 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 | 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 耐腐蚀泵,耐腐蚀真空泵,玻璃钢真空泵-淄博华舜耐腐蚀真空泵有限公司 | 数年网路-免费在线工具您的在线工具箱-shuyear.com | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 网站seo优化_seo云优化_搜索引擎seo_启新网络服务中心 | POS机办理_个人pos机免费领取-银联pos机申请首页 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 |