关于javascript:vue中组件通信之findComponents

5次阅读

共计 898 个字符,预计需要花费 3 分钟才能阅读完成。

// 向上查找组件 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
}
正文完
 0