vue模板组件递归

最新推荐文章于 2024-06-04 00:47:15 发布

安和桥北AN

最新推荐文章于 2024-06-04 00:47:15 发布

阅读量671

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26567389/article/details/122252584

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
  <div class="ReplyChild">
    <div v-for="(item, key) in Data" :key="key">
      <ForeignUser :UID="item.CUID">
        <teplate slot-scope="s">
        //递归出口
          <div v-if="item.PCID == Cid" @click="childMethod(item.CID, s.Nick)">
            <div>
              <span>
                {{ s.Nick }}
                <span
                  >回复<span v-for="(v1, k1) in Data" :key="k1">
                    <span v-if="v1.CID == item.PCID">
                      <ForeignUser :UID="v1.CUID">
                        <teplate slot-scope="s">
                          {{ s.Nick }}
                        </teplate>
                      </ForeignUser>
                    </span></span
                  ></span
                > </span
              >:{{ item.Desc }}
            </div>
            //递归 如果Cid存在继续渲染模板
            <div v-if="Cid">
              <ReplyChild :cid="item.CID" :Data="Data" />
            </div>
          </div>
        </teplate>
      </ForeignUser>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class ReplyChild extends Vue {
  @Prop() private Data!: any;
  @Prop() private Cid!: any;
  childMethod(e: any, nick: any) {
    this.$emit("fath", [e, nick]);
  }
}
</script>

<style scoped lang="less"></style>

调用

<div v-for="(item, key) in Commonts.L" :key="key">
  <div class="reply" v-if="item.PCID == i.CID">
    <div class="reply-main">
      <ReplyChild
        :Data="Commonts.L"
        :Cid="i.CID"
        @fath="reply($event[0], $event[1])"
      />
    </div>
  </div>
</div>