vue设置标签名称_怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢...

在Vue中,如何根据组件的tag标签名快速获取到对应的VueComponent实例?文章探讨了在Vue中实现类似Omi框架的Omi.get功能,通过全局混入方法,创建`$_live_getChildComponent`,允许通过组件tag名获取子组件实例。
摘要由CSDN通过智能技术生成

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是该方法的意义名)

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

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

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

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

{this.props.children}< ...

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

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

Vue main&period;js 文件中全局组件注册部分

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

react组件中刷新组件小技巧

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

vue 中父子组件传值:props和&dollar;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特性的时候 ...

随机推荐

django进阶

路由系统 简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户 ...

Linux学习内容

Linux学习要点(转载自红联) 一.学习Linux的基本要求1. 掌握至少50个以上的常用命令. 2. 熟悉Gnome/KDE等X-windows桌面环境操作 . 3. 掌握.tgz..rpm等软件 ...

异步SRAM控制器的Verilog建模

前言:sram顾名思义静态随机存储器,分为asram异步型和ssram同步型.这里驱动DE2上一块ISSI公司的512KB的asram. 设计思路:因为实际应用中单字节读写效率不高,所以本设计中仿照s ...

javascript生成n至m的随机整数

摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包 ...

yum服务器设置

转自:http://blog.chinaunix.net/uid-22141042-id-1789605.html 不得不说,RedHat的确很邪恶,如果我们直接用他自带的系统碟做YUM源的话,总是会 ...

ros和Android&lpar;一&rpar;

ros和Android :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { ...

Jenkins安装后无法安装插件

处理方法 Jenkins -- 管理插件 -- 高级 -- 升级站点 将URL 中的https 改为 http

用户场景分析i

名字 学生(注重饮食选择,挑剔) 年龄 20 收入 无 知识层面 大学 使用这个网站的典型场景 中午或者晚上饿了但是不知道想吃什么,又不想随便吃,还是比较挑剔..这时,他就需要通过我们的网站来看其他人 ...

lightgbm的sklearn接口和原生接口参数详细说明及调参指点

class lightgbm.LGBMClassifier(boosting_type='gbdt', num_leaves=31, max_depth=-1, learning_rate=0.1, ...

ajax请求格式

ajax请求格式........... var rowsData = $('#receiptPrintList').datagrid('getSelections'); $.ajax({ type: ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值