/**
* 向上找到最近的指定组件
* @param {*} context 当前上下文
* @param {*} componentName 组件的名称
* @returns
*/
export const findComponentUpward = function(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 当前上下文
* @param {*} componentName 组件的名称
* @returns
*/
export const findComponentsUpward = function (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 当前上下文
* @param {*} componentName 组件的名称
* @returns
*/
export const findComponentDownward = function (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 当前上下文
* @param {*} componentName 组件的名称
* @returns
*/
export const findComponentsDownward = function (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 当前上下文
* @param {*} componentName 组件的名称
* @param {*} exceptMe 是否排除自己
* @returns
*/
export const findBrothersComponents = function (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;
}
export default {
findComponentUpward,
findComponentsUpward,
findComponentDownward,
findComponentsDownward,
findBrothersComponents
}
Vue 组件查找
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1、如何在vue项目里面查找某个文件夹下的所有ts文件? 2、如何在vue项目里面根据页面宽度实现响应式布局? 借...
- 一、组件的定义与使用 1、vue文件的组成 (1)模板页面 (2)js模块对象 (3)样式 2、基本使用 (1)引...
- 组件嵌套 Vue组件跟Vue实例是一样的,因此在Vue中一个组件中也可以定义并使用自己的局部组件,这就是组件的嵌套...
- 一、父子组件介绍 二、Vue3.x父组件主动获取子组件的数据和执行子组件方法 2.1、调用子组件的时候定义一个re...
- Vue组件组件 Component 定义组件 公共的组件 使用组件 ...