获取递归组件中异步函数执行后的组件vue实例

最新推荐文章于 2023-12-03 22:29:53 发布

林默笙

最新推荐文章于 2023-12-03 22:29:53 发布

阅读量120

点赞数

分类专栏： async await 文章标签： vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Puppet8/article/details/129264888

版权

async await 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父组件

  async getChildComponentInstances() {
      for (let i = 0; i < this.newshowTree.length; i++) {
        const value = this.newshowTree[i]
        // console.log(value)
        if (i == 0) {
          this.traverse(this.$refs.rootComponent)
//在这里traverse函数是获取根组件的子组件实例
//    traverse(component) {
//      if (component !== undefined) {
//            this.childComponentInstances.push(component)
//         }
//      },
        }
        //当前的组件下的子组件的vue实例
        let treeSon = this.childComponentInstances
        for (let j = 0; j < treeSon.length; j++) {
          treeSon[j].isOpen = false
          if ('model' in treeSon[j]) {
            if (value == treeSon[j].model.id) {
//调用我们需要找到的哪个组件的autoExpand()函数
              await treeSon[j].autoExpand()
              if (treeSon[j].$children.length > 0) {
                this.childComponentInstances = []
//获取到这个组件下的子组件实例
                treeSon[j].$children.forEach((child) => {
                  this.childComponentInstances.push(child)
                })
                // console.log(this.childComponentInstances)
              }
            }
          }
        }
      }
    },

子组件如下，是个只包含自己的递归组件

<template>
  <li>
    <ul class="de-animate-wrap" v-show="isOpen">
      <TreeItem v-for="(item, index) in childNode" :key="index" class="item" :model="item" />
    </ul>
  </li>
</template>