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. js内存深入学习(一)

    一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构  堆 ...

  2. 强大的数据库工具 dbForge Studio ForMySql

    优点: 1.可以将MySql数据库操作仿 sqlserver 的操作方式,便于操作 2.强大的比较拷贝能力.菜单栏上的 Comparison 的功能,可以比较两个数据库的差别,同时可以将数据库Copy ...

  3. C# 定时器-System.Timers.Timer

    using Newtonsoft.Json; using Rafy; using Rafy.Domain; using System; using System.Collections.Generic ...

  4. PhpStorm代码编辑区竖线的用途以及如何去掉

    相信经常用PhpStorm的童鞋都知道代码区有这么一条竖线,但是知道这个竖线究竟是干嘛的么? 相传是古时代的编辑器是没有自动折行的功能的,而且终端分辨率的问题,一行只能显示80个字符,因此很多上古时代 ...

  5. 升级本地部署的CRM到Dynamics 365及部分新特性介绍。

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复241或者20161226可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  6. Vs2017 无法调试APP

      其实一切都是扯,看看有没有主活动吧 症状:能部署安装,没有快捷方式,不启动调试.XARAMIN不能在XML中配置主活动,会自动根据[Activity(Label = "AA", ...

  7. SBC数据格式转换软件

    北京博信施科技有限公司是一家专业从事数据格式转换.数据处理领域研发软件产品和解决方案实施的技术型公司.在当今信息时代,PDF文档格式是在Internet上进行电子文档发行和数字化信息传播的理想文档格式 ...

  8. 环境设置——pyCharm环境下导入MySQLdb遇到的一系列问题

    本文转自http://blog.sina.com.cn/s/blog_135031dae0102yc8l.html 安装好pyCharm后想要import MySQL,结果发现了一系列问题,像推到了塔 ...

  9. docker与虚拟机有何不同

    docker与虚拟机有何不同 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器技术有 ...

  10. Sql Server 获取本周周一

    SELECT DATEADD(Day,(@i+1)-(DATEPART(Weekday,getdate())+@@DATEFIRST-1)%7,getdate())