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实例呢的更多相关文章

  1. Angular04 组件动态地从外部接收值、在组件中使用组件

    一.组件从外部接收值 1 修改组件的ts文件,让组件的属性可以从外部接收值 1.1 导入Input注解对象 1.2 在属性变量前面添加 @Input() 注解 1.3 去掉构造器中的属性变量赋值语句 ...

  2. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

  3. vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

    说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...

  4. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  5. react组件中刷新组件小技巧

    在开发过程中,经常遇到组件数据无法更新,例如:当你用同一个表格展示不同数据的时候,当点击第5页后,再点击另外一份数据时发现还在第五页,并没有回到第一页. 怎么能让一个组件每次数据不一样时都重新加载呢, ...

  6. vue 中父子组件传值:props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  7. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  8. vue定义全局方法 调用其他组件的方法

    官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

  9. Vue props父组件向子组件传值详解

    vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据 Prop是什么? Prop是你可以在组件上注册的一些自定义特性.当一个值传递给一个prop特性的时候 ...

随机推荐

  1. iOS逆向开发(7):微信伪装他人

    上一节小程介绍了微信在进入"附近的人"时修改位置信息的办法,这一次,小程来修改"自己"的信息,伪装成别人. 但是,这里的伪装只是"本地的伪装" ...

  2. 补习系列(6)- springboot 整合 shiro 一指禅

    目标 了解ApacheShiro是什么,能做什么: 通过QuickStart 代码领会 Shiro的关键概念: 能基于SpringBoot 整合Shiro 实现URL安全访问: 掌握基于注解的方法,以 ...

  3. iBinary C++STL模板库关联容器之map/multimap

    目录 一丶关联容器map/multimap 容器 二丶代码例子 1.map的三种插入数据的方法 3.map集合的遍历 4.验证map集合数据是否插入成功 5.map数据的查找 6.Map集合删除元素以 ...

  4. 如何定制Linux外围文件系统?

    本文由云+社区发表 作者:我是乖宝宝哦 一般来说,我们所说的Linux系统指的是各种基于Linux Kernel和GNU Project的操作系统发行版.为了掌握Linux操作系统的使用,了解 Lin ...

  5. Java提高班(二)深入理解线程池ThreadPool

    本文你将获得以下信息: 线程池源码解读 线程池执行流程分析 带返回值的线程池实现 延迟线程池实现 为了方便读者理解,本文会由浅入深,先从线程池的使用开始再延伸到源码解读和源码分析等高级内容,读者可根据 ...

  6. Python四步实现决策树ID3算法,参考机器学习实战

    一.编写计算历史数据的经验熵函数 from math import log def calcShannonEnt(dataSet): numEntries = len(dataSet) labelCo ...

  7. Ubuntu中安装 mercurial – TortoiseHG

    sudo add-apt-repository ppa:tortoisehg-ppa/releases sudo add-apt-repository ppa:mercurial-ppa/releas ...

  8. Spring Boot统一异常处理实践

    摘要: SpringBoot异常处理. 原文:Spring MVC/Boot 统一异常处理最佳实践 作者:赵俊 前言 在 Web 开发中, 我们经常会需要处理各种异常, 这是一件棘手的事情, 对于很多 ...

  9. Web前端:博客美化:一、模板美化

    1.选用模板simplememory 2.写css放在 这些会覆盖掉原来的css样式 我是在网上找的css代码二次加工的 : ) /*1.针对simplememory的修改*/ #google_ad_ ...

  10. C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

    Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...