zoukankan      html  css  js  c++  java
  • vue-自主研发非父子关系组件之间通信的问题

    相信很多人都知道解决组件间通信:vuex,今天的主角不是它。

    element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题。如果我们通信的组件不是父子关系,emitter.js 就不能做到了。

    首页,还是要借鉴前人(emitter)的思路。其实vuex也可以用状态来解决这个问题,我觉得可以不一定要依赖vuex,而且走store繁琐。

    我们的需求就是非父子关系之间简单的事件通信

    现实项目中的一个需求,在“库位列表”的页面操作,通知菜单“库位列表”里的事件。

    我们再看看,页面组件渲染图,elmenu 和  stockposition 发现它们并不是父子关系,但是它们的共有父亲节点是ElContainer,这是我们的突破口:

    方案实现思路:我们先找到父亲节点,我定义寻找的父亲节点:app,然后递归遍历子节点,找到通信目标组件,直接上代码 emitter.js:

    export default {
        methods: {
          dispatchComponent(componentName, eventName, params) {
            var parent = this.$parent || this.$root , com = null;
            var name = parent.$options.name;
            
            // 找到顶级app父亲节点
            while (parent && (!name || name !== componentName) && name!="app") {
              parent = parent.$parent;
      
              if (parent) {
                name = parent.$options.name;
              }
            }
            
            // 递归遍历子节点,找到componentName
            let recursiveChild = (parent) => {
                parent.$children.filter(child=>{
                    if(child.$options.name==componentName) {
                      com = child;
                    } else {
                      recursiveChild(child);
                    }
                })
            }
            
            recursiveChild(parent);
           
            if (com) {
              com.$emit.apply(com, [eventName].concat(params));
            }
          }
        }
    }

    elmenu.vue 组件代码

     

    stockposition.vue 组件代码

    最后效果:

  • 相关阅读:
    win10下jdk8和jdk11切换的批处理脚本
    Deeping中使用python连接Oralce报错:Cannot locate a 64-bit Oracle Client library: "./instantclient_21_1/libclntsh.so: file too short"
    Redis作者“不懂”分布式锁【转载】
    搭建nacos高可用集群
    使用spring.config.location与本地配置文件属性不能互补
    protocol buffer应用场景方案想法
    protocol buffer 入门和基本知识
    IDEA快捷键
    软考问题总结
    pandas 使用问题记录
  • 原文地址:https://www.cnblogs.com/Kummy/p/9496763.html
Copyright © 2011-2022 走看看