怎么在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特性的时候 ...
随机推荐
- SpringCloud系列——Eureka 服务注册与发现
前言 Eureka是一种基于REST(具像状态传输)的服务,主要用于AWS云中定位服务,以实现中间层服务器的负载平衡和故障转移.本文记录一个简单的服务注册与发现实例. GitHub地址:https:/ ...
- Xhprof分析php性能
https://windows.php.net/downloads/pecl/releases/xhprof/0.10.6/ 下载Xhprof版本 配置一个本地访问url,指向index.php,能访 ...
- 2018/12/21:Date类
1.Date类 getDate()返回一个月的某一天 1-31 getDay()返回一周的某一天 getFullyear()返回四位数的年份 getMonth()返回月份 比实际情况小 1 0代表1月 ...
- Python全栈开发之---装饰器
1.装饰器的形成过程 import time def func1(): print('in func1') def timer(func): def inner(): start = time.tim ...
- javascript常用的41个经典技巧
1. 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- 使用 WeihanLi.Npoi 操作 CSV
使用 WeihanLi.Npoi 操作 CSV Intro 最近发现 csv 文件在很多情况下都在使用,而且经过大致了解,csv 格式简单,相比 excel 文件要小很多,读取也很是方便,而且也很通用 ...
- git rebase 使用详解
rebase 假设你现在基于远程分支"origin",创建一个叫"mywork"的分支. $ git checkout -b mywork origin 现 ...
- C#基础第六天
数组 方法 实现代码的重用 参数 返回值 注释 return 语法:[public] static 返回值类型 方法名([参数列表]){ 方法体;}public:访问修饰符,公开的,公共的s ...
- Asp.net mvc 项目返回Json
因mvc控制器返回类型JsonResult 在处理对象转JSON的时候,对日期的格式化处理并不太符合要求,所以重新继承抽象类ActionResult使用Newtonsoft.Json来系列化 usin ...