vue寻找任意组件实例（iview源码）

最新推荐文章于 2025-03-27 17:42:34 发布

furfur-jiang

最新推荐文章于 2025-03-27 17:42:34 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44523860/article/details/123506903

版权

vue 专栏收录该内容

40 篇文章

订阅专栏

iview/utils源码地址

findComponentUpward
由⼀个组件，向上找到最近的指定组件；
findComponentsUpward
由⼀个组件，向上找到所有的指定组件；
findComponentDownward
由⼀个组件，向下找到最近的指定组件；
findComponentsDownward
由⼀个组件，向下找到所有指定的组件；
findBrothersComponents
由⼀个组件，找到指定组件的兄弟组件

// Find components upward
function findComponentUpward (context, componentName, componentNames) {
    if (typeof componentName === 'string') {
        componentNames = [componentName];
    } else {
        componentNames = componentName;
    }

    let parent = context.$parent;
    let name = parent.$options.name;
    while (parent && (!name || componentNames.indexOf(name) < 0)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
    }
    return parent;
}
export {findComponentUpward};

// Find component downward
export function findComponentDownward (context, componentName) {
    const childrens = context.$children;
    let children = null;

    if (childrens.length) {
        for (const child of childrens) {
            const name = child.$options.name;
            if (name === componentName) {
                children = child;
                break;
            } else {
                children = findComponentDownward(child, componentName);
                if (children) break;
            }
        }
    }
    return children;
}

// Find components downward
export function findComponentsDownward (context, componentName, ignoreComponentNames = []) {
    if (!Array.isArray(ignoreComponentNames)) {
        ignoreComponentNames = [ignoreComponentNames];
    }
    return context.$children.reduce((components, child) => {
        if (child.$options.name === componentName) components.push(child);
        if (ignoreComponentNames.indexOf(child.$options.name) < 0) {
            const foundChilds = findComponentsDownward(child, componentName);
            return components.concat(foundChilds);
        } else {
            return components;
        }
    }, []);
}

// Find components upward
export function findComponentsUpward (context, componentName) {
    let parents = [];
    const parent = context.$parent;
    if (parent) {
        if (parent.$options.name === componentName) parents.push(parent);
        return parents.concat(findComponentsUpward(parent, componentName));
    } else {
        return [];
    }
}

// Find brothers components
export function findBrothersComponents (context, componentName, exceptMe = true) {
    let res = context.$parent.$children.filter(item => {
        return item.$options.name === componentName;
    });
    let index = res.findIndex(item => item._uid === context._uid);
    if (exceptMe) res.splice(index, 1);
    return res;
}