找到任意组件实例的方法

由一个组件，向上找到最近的指定组件

/** * 由一个组件，向上找到最近的指定组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name */ function findComponentUpward(context, componentName) { let parent = context.$parent let name = parent.$options.name while (parent && (!name || [componentName].indexOf(name) < 0)) { parent = parent.$parent if (parent) name = parent.$options.name } return parent }

由一个组件，向上找到所有的指定组件

/** * 由一个组件，向上找到所有的指定组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name */ 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 [] } }

由一个组件，向下找到最近的指定组件

/** * 由一个组件，向下找到最近的指定组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name */ 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 }

由一个组件，向下找到所有指定的组件

/** * 由一个组件，向下找到所有指定的组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name */ function findComponentsDownward(context, componentName) { return context.$children.reduce((components, child) => { if (child.$options.name === componentName) components.push(child) const foundChilds = findComponentsDownward(child, componentName) return components.concat(foundChilds) }, []) }

由一个组件，找到指定组件的兄弟组件

/** * 由一个组件，找到指定组件的兄弟组件 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this * @param {*} componentName 要找的组件的 name * @param {*} exceptMe 是否把本身除外 */ 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 }

本文章由作者搜集整理，并非原创