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

 更新时间: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/

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

相关文章

  • vue的table表格组件的封装方式

    vue的table表格组件的封装方式

    这篇文章主要介绍了vue的table表格组件的封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue组件间的双向绑定示例解析

    Vue组件间的双向绑定示例解析

    这篇文章主要介绍了Vue组件间的双向绑定,我们都知道当父组件改变了某个值后,如果这个值传给了子组件,那么子组件也会自动跟着改变,但是这是单向的,使用v-bind的方式,即子组件可以使用父组件的值,但是不能改变这个值
    2023-03-03
  • 基于vue2.0实现仿百度前端分页效果附实现代码

    基于vue2.0实现仿百度前端分页效果附实现代码

    本文通过实例代码给大家介绍了基于vue2.0实现仿百度前端分页效果,在文中给大家记录了遇到的问题及解决方法,需要的朋友可以参考下
    2018-10-10
  • vuejs实现递归树型菜单组件

    vuejs实现递归树型菜单组件

    本篇文章主要介绍了vuejs实现递归树型菜单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中Pinia的各种详细说明和使用示例

    Vue中Pinia的各种详细说明和使用示例

    Pinia是Vue 3的专属状态管理库,旨在替代Vuex,提供更简单、直观的状态管理解决方案,它支持组合式API和选项式API,允许跨组件或页面共享状态,避免了Vuex中的许多复杂概念,本文介绍Vue中Pinia的各种详细说明和使用示例,感兴趣的朋友一起看看吧
    2025-01-01
  • vue + Electron 制作桌面应用的示例代码

    vue + Electron 制作桌面应用的示例代码

    这篇文章主要介绍了vue + Electron 制作桌面应用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • 解决vue热替换失效的根本原因

    解决vue热替换失效的根本原因

    今天小编就为大家分享一篇解决vue热替换失效的根本原因,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    这篇文章主要介绍了Vue使用antd中input组件去验证输入框输入内容-rules-案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

    web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

    这篇文章主要介绍了web面试中常问问题,MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    本篇文章主要介绍了Vue.js中的v-on(事件处理),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论