vue 查找组件搜索组件封装

最新推荐文章于 2024-08-17 09:03:20 发布

kingrome2009

最新推荐文章于 2024-08-17 09:03:20 发布

阅读量2.4k

点赞数

分类专栏： vuejs2.0

本文链接：https://blog.csdn.net/kingrome2017/article/details/104076026

版权

本文介绍如何在Vue项目中实现组件查找和封装，通过示例代码展示搜索组件的逻辑，并探讨组件复用和封装的最佳实践，提升开发效率。

摘要由CSDN通过智能技术生成

// 由一个组件，向上找到最近的指定组件
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) => {