详解vue之自行实现派发与广播(dispatch与broadcast)


Posted in Vue.js onJanuary 19, 2021

要解决的问题

主要针对组件之间的跨级通信

为什么要自己实现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.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
You might like
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Python引用计数操作示例
2018/08/23 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python Pexpect模块的使用
2020/12/25 Python
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
个人近期表现材料
2014/02/11 职场文书
继承公证书
2014/04/09 职场文书
践行三严三实心得体会
2014/10/13 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
《失物招领》教学反思
2016/02/20 职场文书
导游词之张家口
2019/12/13 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL