• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
李松泰李c 显示全部楼层 发表于 2021-10-25 19:57:51 |阅读模式 打印 上一主题 下一主题
要办理的问题


紧张针对组件之间的跨级通信
为什么要自己实现dispatch与broadcast?


因为在做独立组件开发或库时,最好是不依赖第三方库
为什么不使用provide与inject?


因为它的使用场景,紧张是子组件获取上级组件的状态,跨级组件间建立了一种自动提供与依赖注入的关系。
然后有两种场景它不能很好的办理:
父组件向子组件(支持跨级)传递数据;
子组件向父组件(支持跨级)传递数据。
代码如下:

emitter.js
  1. function broadcast(componentName, eventName, params) {
  2. this.$children.forEach(child => {
  3.   const name = child.$options.name;
  4.   if (name === componentName) {
  5.    child.$emit.apply(child, [eventName].concat(params));
  6.   } else {
  7.    // todo 如果 params 是空数组,接收到的会是 undefined
  8.    broadcast.apply(child, [componentName, eventName].concat([params]));
  9.   }
  10. });
  11. }
  12. export default {
  13. methods: {
  14.   dispatch(componentName, eventName, params) {
  15.    let parent = this.$parent || this.$root;
  16.    let name = parent.$options.name;
  17.    while (parent && (!name || name !== componentName)) {
  18.     parent = parent.$parent;
  19.     if (parent) {
  20.      name = parent.$options.name;
  21.     }
  22.    }
  23.    if (parent) {
  24.     parent.$emit.apply(parent, [eventName].concat(params));
  25.    }
  26.   },
  27.   broadcast(componentName, eventName, params) {
  28.    broadcast.call(this, componentName, eventName, params);
  29.   }
  30. }
  31. };
复制代码
parent.vue
  1. <template>
  2. <div>
  3.   <h1>我是父组件</h1>
  4.   <button @click="handleClick">触发事件</button> <child />
  5. </div>
  6. </template>
  7. <script>
  8. import Emitter from "@/mixins/emitter.js";
  9. import Child from "./child";
  10. export default {
  11. name: "componentA",
  12. mixins: [Emitter],
  13. created() {
  14.   this.$on("child-to-p", this.handleChild);
  15. },
  16. methods: {
  17.   handleClick() {
  18.    this.broadcast("componentB", "on-message", "Hello Vue.js");
  19.   },
  20.   handleChild(val) {
  21.    alert(val);
  22.   }
  23. },
  24. components: {
  25.   Child
  26. }
  27. };
  28. </script>
复制代码
child.vue
  1. <template>
  2. <div>我是子组件</div>
  3. </template>
  4. <script>
  5. import Emitter from "@/mixins/emitter.js";
  6. export default {
  7. name: "componentB",
  8. mixins: [Emitter],
  9. created() {
  10.   this.$on("on-message", this.showMessage);
  11.   this.dispatch("componentA", "child-to-p", "hello parent");
  12. },
  13. methods: {
  14.   showMessage(text) {
  15.    window.alert(text);
  16.   }
  17. }
  18. };
  19. </script>
复制代码
这样就能实现跨级组件自定义通信了,但是,要留意此中一个问题:订阅必须先于发布,也就是说先有on再有emit
父子组件渲染顺序,实例创建顺序


子组件先于父组件前渲染,以是在子组的mounted派发变乱时,在父组件中的mounte中是监听不到的。
而父组件的create是先于子组件的,以是可以在父组件中的create可以监听到
到此这篇关于详解vue之自行实现派发与广播(dispatch与broadcast)的文章就先容到这了,更多相关vue 派发与广播内容请搜索草根技能分享以前的文章或继续欣赏下面的相关文章盼望大家以后多多支持草根技能分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作