vue中组件通信之findComponents

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 向上查找组件 context为当前组件上下文对象,componentName为组件名
const findUpwardComponent = (context, componentName) => {
let parent = context.$parent
let name = parent.$options.name
while (parent && (!name || !name.includes(componentName))) {
parent = parent.$parent
if (parent) name = parent.$options.name
}
return parent
}

// 查找兄弟组件
const findBrotherComponents = (ctx, componentName, exceptMe = true) => {
const $brothers = ctx.$parent.$children.filter(item => {
return item.$options.name && item.$options.name.includes(componentName)
})
const index = $brothers.findIndex(item => item._uid === ctx._uid)
if (exceptMe && index > -1) $brothers.splice(index, 1)
return $brothers
}

// 向下查找
const findDownwardComponent = (context, componentName) => {
const $children = context.$children
let bean = null
if ($children.length) {
for (const child of $children) {
const name = child.$options.name
if (name && name.includes(componentName)) {
bean = child
break
} else {
bean = findDownwardComponent(child, componentName)
if (bean) break
}
}
}
return bean
}

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!