怎么在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特性的时候 ...
随机推荐
- windows powershell一些操作
- CentOS 7上安装Docker 1.8
Docker支持运行在以下CentOS版本: CentOS 7.X 安装在二进制兼容的EL7版本如 Scientific Linux也是可能成功的,但是Docker没有测试过并且不官方支持. 此文带你 ...
- .NET Http请求
声明:本代码只是我使用的网络请求方式的封装,大家如果有其他的可以一起讨论讨论. 本代码可以在.NET 与.NET CORE的平台下无须做任何改动(除非手动加一些必要的引用,resharper会有 ...
- response.redirect 与location.href 的区别
最近做项目时发现,先弹出提示框,再跳转页面 这样写:Jscript.Alert("你好,Hello!"); Response.Redirect("/index.aspx& ...
- C# 实现对PPT插入、编辑、删除表格
现代学习和办公当中,经常会接触到对表格的运用,像各种单据.报表.账户等等.在PPT演示文稿中同样不可避免的应用到各种数据表格.对于在PPT中插入表格,我发现了一个新方法,不过我用到了一款免费的.NET ...
- 学JAVA第十天,一维数组及二维数组的使用。
今天老师讲了JAVA数组,之前学C#的时候就学过一维数组,至于二维数组当时只是粗略普及了一下. 现在想学JAVA又学到了数组,但是这次不同,注重讲二维数组,因为老师知道我们都了解一维数组了. 所以现在 ...
- 零基础学Python--------进阶篇 第6章 函数
第6章 函数 6.1函数的创建和调用 提到函数,大家会想到数学函数吧,函数是数学最重要的一个模块,贯穿整个数学学习过程.在Python中,函数的应用非常广泛.在前面我们已经多次接触过函数.例如,用于输 ...
- 在ubuntu16.04中再次体验.net core 2.0
在上一篇文章中在ubuntu16.04中初次体验.net core 2.0 简单介绍了一下ubuntu中运行.net core 2.0.配置nginx反向代理以及安装supervisor守护进程……本 ...
- Bootstrap中内联单选按钮
<div class="form-group"> <label class="control-label">性别:</label& ...
- AI时代大点兵-国内外知名AI公司2018年最新盘点
AI时代大点兵-国内外知名AI公司2018年最新盘点 导言 据腾讯研究院统计,截至2017年6月,全球人工智能初创企业共计2617家.美国占据1078家居首,中国以592家企业排名第二,其后分别是英国 ...