Vue 组件查找


/**
 * 向上找到最近的指定组件
 * @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
}