关于找到任意组件实例的方法

目录找到任意组件实例的方法vue常用组件库移动端常用组件库pc端常用组件库找到任意组件实例的方法由一个组件，向上找到最近的指定组件/***由一个组件，向上找到最近的指定组件*@param{*...

目录

找到任意组件实例的方法

由一个组件，向上找到最近的指定组件

/**
* 由一个组件，向上找到最近的指定组件
* @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
* @param {*} componentName 要找的组件的 name
*/
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
}

由一个组件，向上找到所有的指定组件

/**
* 由一个组件，向上找到所有的指定组件
* @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
* @param {*} componentName 要找的组件的 name
*/
functiwww.cppcns.comon 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 []
 }
}

由一个组件，向下找到最近的指定组件

/**
* 由一个组件，向下找到最近的指定组件
* @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
* @param {*} componentName 要找的组件的 name
*/
functionjavascript 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
}

由一个组件，向下找到所有指定的组件

/**
* 由一个组件，向下找到所有指定的组件
* @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
* @param {*} componentName 要找的组件的 name
*/
function findComponentsDownward(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 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
* @param {*} componentName 要找的组件的 name
* @param {*} exceptMe 是否把本身除外
*/
function findBrothersComponents(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
}

vue常用组件库

移动端常用组件库

1.Vant https://youzan.github.io/vant

2.CubeUI https://didi.github.io/cube-ui

3.MintUI https://mint-ui.github.io

3.NutUI https://nutui.jd.com/ // 京东自php己的

pc端常用组件库

1.ElementUI https://element.eleme.cn

2.IViewUI https://www.iviewui.com

2.AntDesignUI https://ant.design/

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。