返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于找到任意组件实例的方法
  • 755
分享到

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

2024-04-02 19:04:59 755人浏览 八月长安
摘要

目录找到任意组件实例的方法Vue常用组件库移动端常用组件库pc端常用组件库找到任意组件实例的方法 由一个组件,向上找到最近的指定组件 function findComponentU

找到任意组件实例的方法

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


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) => {
    if (child.$options.name === componentName) components.push(child)
    const foundChilds = findComponentsDownward(child, componentName)
    return components.concat(foundChilds)
  }, [])
}

由一个组件,找到指定组件的兄弟组件


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/

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于找到任意组件实例的方法

本文链接: https://lsjlt.com/news/167534.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作