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 组件代码
最后效果:
vue-自主研发非父子关系组件之间通信的问题的更多相关文章
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
随机推荐
- xampp+discuz 安装踩坑后总结
之前安装xampp先是出现mysql无法启动,接着安装discuz到最后一部时出现乱码,以及报错(0).后来卸载了xampp,重新安装xampp和discuz后就可以了,应该是版本太高的问题, xam ...
- Dynamics365 WebAPI ADFS token 获取
public class CrmAuth { ///<summary> /// Token /// </summary> public string access_token ...
- [02-01]Java学习路线(完整详细版)
Java基础课程 Java基础课程内容涉及:Java开发介绍.Java数组.Java面向对象.常用基础类.集合.IO流.多线程.异常.网络.反射. 第一阶段:Java基础 1 第一部分:Java开发介 ...
- SNMP 优秀帖子
-- 比较系统的描述http://blog.sina.com.cn/s/blog_54837cf301011607.html 几个SNMP官方网站(搜索关键字:snmplibrary C#):http ...
- 讨论mui 的 mui.init 与 mui.plusReady
先来看一段代码 (function(m, doc) { mui.plusReady(function(){ var self = plus.webview.currentWebview(); olti ...
- 一对多关联模型,BELONGS_TO
先分别创建三张表:test_user test_message test_user 表里有id.name字段 test_message 表里有id.content.uid字段 然后建立一个Mode ...
- Movavi Video Editor 15 Plus(视频编辑软件) 中文版
Movavi Video Editor 15 Plus Mac版是Movavi系列中的一款视频编辑器,Movavi Video Editor Plus 15破解版提供了全面的视频功能,另外还支持为视频 ...
- paginate()出来的数据怎样循环插入数据?
paginate()出来的数据怎样循环插入数据? paginate()分页如何转数组操作数据之后再转回对象? thinkphp5 model里面用toarray后怎么分页? 以上类似问题的出现,是因为 ...
- Python环境——安装扩展库
一.修改easy_install源 在操作用户家目录添加一个文件 cat >> ~/.pydistutils.cfg <<EOF [easy_install] index-ur ...
- Adobe XD 介绍
Adobe XD 关于XD这个软件我也是经过别人介绍才知道的,刚出来每两年,之前是没有中文版的,最近才更新了中文版,使用起来更加方便了. 这就是主界面,界面十分简洁但又一目了然,同时主界面还会有链接, ...