1. 1.以前玩omi框架的时候,有Omi.get方法来获取实例, ...好久没玩了,忘了。
    反正很喜欢该方法。
    2.如今想在vue里面怎么能够快速获取到对应组件标签名的的实例呢?
    3.文档也看过,似乎脑海中没啥印象获取获取,除了ref或者vm.$children,这个只能获取到父子关系,或者爷孙...等关系,反正比较麻烦
    4.那就全局注册个$_live_getChildComponent方法,每个实例便有了改方法。
    5.使用 this.$_live_getChildComponent('vue实例', '组件tag名')
  1. // 全局混入一些工具方法(根据自定义标签名(组件名)获取某个Vue实例的孩子组件),该方法会注册到每一个Vue实例上。
  2. Vue.mixin({
  3. created: function() {
  4.  
  5. let Type = (function() {
  6. let Type = {};
  7. for (let i = 0, type; type = ['Undefined', 'Null', 'Boolean', 'Number', 'String', 'Function', 'Array', 'Object'][i++]; ) {
  8. (function(type) {
  9. Type['is' + type] = function(obj) {
  10. return Object.prototype.toString.call(obj) === '[object ' + type + ']';
  11. };
  12. })(type);
  13. }
  14. return Type;
  15. })();
  16.  
  17. this.$_live_type = Type;
  18.  
  19. // use: this.$getChildComponent(vm, 'xx-xx')
  20. this.$_live_getChildComponent = function(vueInstance, componentTag) {
  21. let component = null;
  22. let allComp = getAllChildComp(vueInstance);
  23.  
  24. let i = allComp.findIndex(function(vm) {
  25. return vm.$options._componentTag === componentTag;
  26. });
  27. if (i !== -1) {
  28. component = allComp[i];
  29. }
  30. return component;
  31.  
  32. function getAllChildComp(instance) {
  33. let allComp = [], child;
  34. if (Type.isObject(instance)) {
  35. child = instance.$children;
  36. } else if (Type.isArray(instance)) {
  37. child = instance;
  38. }
  39. for (let i = 0; i < child.length; i++) {
  40. allComp.push(child[i]);
  41. if (child[i].$children.length > 0) { // 还有孩子
  42. allComp = allComp.concat(getAllChildComp(child[i].$children))
  43. };
  44. }
  45. return allComp;
  46. }
  47. };
  48. }
  49. });
  1. 注: 至于$_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. windows powershell一些操作

  2. CentOS 7上安装Docker 1.8

    Docker支持运行在以下CentOS版本: CentOS 7.X 安装在二进制兼容的EL7版本如 Scientific Linux也是可能成功的,但是Docker没有测试过并且不官方支持. 此文带你 ...

  3. .NET Http请求

    声明:本代码只是我使用的网络请求方式的封装,大家如果有其他的可以一起讨论讨论.    本代码可以在.NET 与.NET CORE的平台下无须做任何改动(除非手动加一些必要的引用,resharper会有 ...

  4. response.redirect 与location.href 的区别

    最近做项目时发现,先弹出提示框,再跳转页面 这样写:Jscript.Alert("你好,Hello!"); Response.Redirect("/index.aspx& ...

  5. C# 实现对PPT插入、编辑、删除表格

    现代学习和办公当中,经常会接触到对表格的运用,像各种单据.报表.账户等等.在PPT演示文稿中同样不可避免的应用到各种数据表格.对于在PPT中插入表格,我发现了一个新方法,不过我用到了一款免费的.NET ...

  6. 学JAVA第十天,一维数组及二维数组的使用。

    今天老师讲了JAVA数组,之前学C#的时候就学过一维数组,至于二维数组当时只是粗略普及了一下. 现在想学JAVA又学到了数组,但是这次不同,注重讲二维数组,因为老师知道我们都了解一维数组了. 所以现在 ...

  7. 零基础学Python--------进阶篇 第6章 函数

    第6章 函数 6.1函数的创建和调用 提到函数,大家会想到数学函数吧,函数是数学最重要的一个模块,贯穿整个数学学习过程.在Python中,函数的应用非常广泛.在前面我们已经多次接触过函数.例如,用于输 ...

  8. 在ubuntu16.04中再次体验.net core 2.0

    在上一篇文章中在ubuntu16.04中初次体验.net core 2.0 简单介绍了一下ubuntu中运行.net core 2.0.配置nginx反向代理以及安装supervisor守护进程……本 ...

  9. Bootstrap中内联单选按钮

    <div class="form-group"> <label class="control-label">性别:</label& ...

  10. AI时代大点兵-国内外知名AI公司2018年最新盘点

    AI时代大点兵-国内外知名AI公司2018年最新盘点 导言 据腾讯研究院统计,截至2017年6月,全球人工智能初创企业共计2617家.美国占据1078家居首,中国以592家企业排名第二,其后分别是英国 ...