怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢
1.以前玩omi框架的时候,有Omi.get方法来获取实例, ...好久没玩了,忘了。
反正很喜欢该方法。
2.如今想在vue里面怎么能够快速获取到对应组件标签名的的实例呢?
3.文档也看过,似乎脑海中没啥印象获取获取,除了ref或者vm.$children,这个只能获取到父子关系,或者爷孙...等关系,反正比较麻烦
4.那就全局注册个$_live_getChildComponent方法,每个实例便有了改方法。
5.使用 this.$_live_getChildComponent('vue实例', '组件tag名')
// 全局混入一些工具方法(根据自定义标签名(组件名)获取某个Vue实例的孩子组件),该方法会注册到每一个Vue实例上。
Vue.mixin({
created: function() { let Type = (function() {
let Type = {};
for (let i = 0, type; type = ['Undefined', 'Null', 'Boolean', 'Number', 'String', 'Function', 'Array', 'Object'][i++]; ) {
(function(type) {
Type['is' + type] = function(obj) {
return Object.prototype.toString.call(obj) === '[object ' + type + ']';
};
})(type);
}
return Type;
})(); this.$_live_type = Type; // use: this.$getChildComponent(vm, 'xx-xx')
this.$_live_getChildComponent = function(vueInstance, componentTag) {
let component = null;
let allComp = getAllChildComp(vueInstance); let i = allComp.findIndex(function(vm) {
return vm.$options._componentTag === componentTag;
});
if (i !== -1) {
component = allComp[i];
}
return component; function getAllChildComp(instance) {
let allComp = [], child;
if (Type.isObject(instance)) {
child = instance.$children;
} else if (Type.isArray(instance)) {
child = instance;
}
for (let i = 0; i < child.length; i++) {
allComp.push(child[i]);
if (child[i].$children.length > 0) { // 还有孩子
allComp = allComp.concat(getAllChildComp(child[i].$children))
};
}
return allComp;
}
};
}
});
注: 至于$_live_getChildComponent这他妈什么命名,其实我也不太喜欢,但是Evan You是这么说的,我也只好遵守了。
在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。
$_live_getChildComponent($_为前缀, live是我目前开发的项目名称, getChildComponent是该方法的意义名)
怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢的更多相关文章
- Angular04 组件动态地从外部接收值、在组件中使用组件
一.组件从外部接收值 1 修改组件的ts文件,让组件的属性可以从外部接收值 1.1 导入Input注解对象 1.2 在属性变量前面添加 @Input() 注解 1.3 去掉构造器中的属性变量赋值语句 ...
- React组件中对子组件children进行加强
React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...
- vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题
说明: 近日开发中碰见一个很诡异的问题, 父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- react组件中刷新组件小技巧
在开发过程中,经常遇到组件数据无法更新,例如:当你用同一个表格展示不同数据的时候,当点击第5页后,再点击另外一份数据时发现还在第五页,并没有回到第一页. 怎么能让一个组件每次数据不一样时都重新加载呢, ...
- vue 中父子组件传值:props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- vue定义全局方法 调用其他组件的方法
官网的写法 vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例 如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...
- Vue props父组件向子组件传值详解
vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据 Prop是什么? Prop是你可以在组件上注册的一些自定义特性.当一个值传递给一个prop特性的时候 ...
随机推荐
- 【ASP.NET Core快速入门】(十四)MVC开发:UI、 EF + Identity实现、注册实现、登陆实现
前言 之前我们进行了MVC的web页面的Cookie-based认证实现,接下来的开发我们要基于之前的MvcCookieAuthSample项目做修改. MvcCookieAuthSample项目地址 ...
- msf登陆Windows 1
前言:刚做完这个测试,于是,写下自己的测试过程以及测试中遇到的问题解决办法 1. Windows版本适合类型(Win 7 // XP...............) 2. 以XP为靶机,借助工具get ...
- 补习系列(3)-springboot中的几种scope
目标 了解HTTP 请求/响应头及常见的属性: 了解如何使用SpringBoot处理头信息 : 了解如何使用SpringBoot处理Cookie : 学会如何对 Session 进行读写: 了解如何在 ...
- Java开发知识之JAVA的反射
目录 Java中的反射机制 一丶什么是反射机制 二丶Class类,自描述类.获取类名的三种方法 1.使用静态属性Class获取 2.使用Class方法 forName()获取自描述Class 3.使用 ...
- 如何用sysbench做好IO性能测试
sysbench 是一个非常经典的综合性能测试工具,通常都用它来做数据库的性能压测,但也可以用来做CPU,IO的性能测试.而对于IO测试,不是很推荐sysbench,倒不是说它有错误,工具本身没有任何 ...
- CSS float的相关图文详解(一)
大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...
- Django 系列博客(十四)
Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...
- WebLogic及其他
如何给WebLogic指定大小的内存? 在启动WebLogic的脚本中(位于所在Domian对应服务器目录下的startServerName),增加set MEM_ARGS= -Xms32m -Xmx ...
- 从零开始学安全(三十九)●FCK编辑器解析漏洞
fck 现在存在漏洞的本版分别是 2.4.2 ,2.4.4,2.6.6 可以在 查看版本 2.4.2 在 图片域有上传点 2.4.4 这里有几个按钮,首先是 Get Folders and Files ...
- JS 无限长form表单提交
1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再 ...