zoukankan      html  css  js  c++  java
  • 怎么在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是该方法的意义名)
  • 相关阅读:
    [BJDCTF 2nd]fake google
    flask之ssti模板注入初窥
    ctfshow-web14
    ctfshow-web 13
    ctfshow-web12
    ctfshow-web 11
    ctfshow-web10
    ctfshow-web9
    python学习笔记(四)- 常用的字符串的方法
    python学习笔记(三)- 字典、集合
  • 原文地址:https://www.cnblogs.com/sorrowx/p/8611160.html
Copyright © 2011-2022 走看看