相信很多人都知道解决组件间通信: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 组件代码

最后效果:

vue-自主研发非父子关系组件之间通信的问题的更多相关文章

  1. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  2. Vue_(组件通讯)非父子关系组件通信

    Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...

  3. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  4. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  5. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  6. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  7. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  8. RXJS组件间超越父子关系的相互通信

    RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...

  9. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

随机推荐

  1. xampp+discuz 安装踩坑后总结

    之前安装xampp先是出现mysql无法启动,接着安装discuz到最后一部时出现乱码,以及报错(0).后来卸载了xampp,重新安装xampp和discuz后就可以了,应该是版本太高的问题, xam ...

  2. Dynamics365 WebAPI ADFS token 获取

    public class CrmAuth { ///<summary> /// Token /// </summary> public string access_token ...

  3. [02-01]Java学习路线(完整详细版)

    Java基础课程 Java基础课程内容涉及:Java开发介绍.Java数组.Java面向对象.常用基础类.集合.IO流.多线程.异常.网络.反射. 第一阶段:Java基础 1 第一部分:Java开发介 ...

  4. SNMP 优秀帖子

    -- 比较系统的描述http://blog.sina.com.cn/s/blog_54837cf301011607.html 几个SNMP官方网站(搜索关键字:snmplibrary C#):http ...

  5. 讨论mui 的 mui.init 与 mui.plusReady

    先来看一段代码 (function(m, doc) { mui.plusReady(function(){ var self = plus.webview.currentWebview(); olti ...

  6. 一对多关联模型,BELONGS_TO

    先分别创建三张表:test_user   test_message test_user 表里有id.name字段 test_message 表里有id.content.uid字段 然后建立一个Mode ...

  7. Movavi Video Editor 15 Plus(视频编辑软件) 中文版

    Movavi Video Editor 15 Plus Mac版是Movavi系列中的一款视频编辑器,Movavi Video Editor Plus 15破解版提供了全面的视频功能,另外还支持为视频 ...

  8. paginate()出来的数据怎样循环插入数据?

    paginate()出来的数据怎样循环插入数据? paginate()分页如何转数组操作数据之后再转回对象? thinkphp5 model里面用toarray后怎么分页? 以上类似问题的出现,是因为 ...

  9. Python环境——安装扩展库

    一.修改easy_install源 在操作用户家目录添加一个文件 cat >> ~/.pydistutils.cfg <<EOF [easy_install] index-ur ...

  10. Adobe XD 介绍

    Adobe XD 关于XD这个软件我也是经过别人介绍才知道的,刚出来每两年,之前是没有中文版的,最近才更新了中文版,使用起来更加方便了. 这就是主界面,界面十分简洁但又一目了然,同时主界面还会有链接, ...