關(guān)于找到任意組件實例的方法

更新時間：2022年09月14日 15:03:21 作者：王喬治威爾金斯瑪格麗特湯姆森希爾德薩拉陽

這篇文章主要介紹了關(guān)于找到任意組件實例的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

找到任意組件實例的方法

由一個組件，向上找到最近的指定組件

/**
?* 由一個組件，向上找到最近的指定組件
?* @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
}