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

 更新时间:2022年09月14日 15:03:21   作者:王乔治威尔金斯玛格丽特汤姆森希尔德萨拉阳  
这篇文章主要介绍了关于找到任意组件实例的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

找到任意组件实例的方法

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

/**
 * 由一个组件,向上找到最近的指定组件
 * @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
 */
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 []
  }
}

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

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

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

/**
 * 由一个组件,向下找到所有指定的组件
 * @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/ // 京东自己的

pc端常用组件库

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

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

2.AntDesignUI https://ant.design/

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于vue3 vue-cli4 线上部署及优化的问题

    基于vue3 vue-cli4 线上部署及优化的问题

    这篇文章主要介绍了基于vue3 vue-cli4 线上部署及优化的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue中父组件向子组件通信的方法

    Vue中父组件向子组件通信的方法

    可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue中父组件向子组件通信的方法,需要的朋友参考下吧
    2017-07-07
  • vue实现自定义全局右键菜单

    vue实现自定义全局右键菜单

    这篇文章主要为大家详细介绍了vue实现自定义全局右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • axios中post请求json和application/x-www-form-urlencoded详解

    axios中post请求json和application/x-www-form-urlencoded详解

    Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue增删改查的简单操作

    vue增删改查的简单操作

    这篇文章主要为大家详细介绍了vue增删改查的简单操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vant IndexBar实现的城市列表的示例代码

    vant IndexBar实现的城市列表的示例代码

    这篇文章主要介绍了vant IndexBar实现的城市列表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue 解决异步数据更新问题

    vue 解决异步数据更新问题

    今天小编就为大家分享一篇vue 解决异步数据更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue自定义铃声提示音组件的实现

    Vue自定义铃声提示音组件的实现

    这篇文章主要介绍了Vue中自定义一个铃声提示音组件的实现以及使用方法,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-01-01
  • 使用vue-router设置每个页面的title方法

    使用vue-router设置每个页面的title方法

    下面小编就为大家分享一篇使用vue-router设置每个页面的title方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论