目录找到任意组件实例的方法Vue常用组件库移动端常用组件库pc端常用组件库找到任意组件实例的方法 由一个组件,向上找到最近的指定组件 function findComponentU
由一个组件,向上找到最近的指定组件
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
}
由一个组件,向上找到所有的指定组件
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 []
}
}
由一个组件,向下找到最近的指定组件
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
}
由一个组件,向下找到所有指定的组件
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)
}, [])
}
由一个组件,找到指定组件的兄弟组件
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
}
1.Vant https://youzan.GitHub.io/vant
2.CubeUI Https://didi.github.io/cube-ui
3.MintUI https://mint-ui.github.io
3.NutUI https://nutui.jd.com/ // 京东自己的
1.ElementUI https://element.eleme.cn
2.IViewUI https://www.iviewui.com
2.AntDesignUI https://ant.design/
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 关于找到任意组件实例的方法
本文链接: https://lsjlt.com/news/167534.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0