递归组件---网易盖楼评论示例

一、递归函数的说明

递归有两个特点:

1. 自己调用自己
2. 停止条件(否则会陷入死循环)

二、递归组件数据架构

• 评论应该是一个数组,里面的每一个对象都是一条评论,主要的数据就是评论内容
• 网易评论的数据架构更注重新评论(盖楼),所以父评论反而是子组件

例子:

<script>
export default {
  data() {
    return {
      // 评论应该是一个数组,里面的每一个对象都是一条评论,主要的数据就是评论内容
      commentList: [
        // 第一层
        { content: "有这货玩，别人真的没法玩了" },
        // 第二层
        {
          content: "还说鹰家要主走40吨的空投轻车，弃60吨的硬仗车，看看",
          parent: { content: "有这货玩，别人真的没法玩了" },
        },
        // 第三层:只有这种以上才需要递归
        {
          content:
            "坦克在无人机面前就是靶标，亚美尼亚战争还没看够啊？这玩意也只能打打小毛贼。[挨揍]",
          parent: {
            content: "还说鹰家要主走40吨的空投轻车，弃60吨的硬仗车，看看",
            parent: { content: "有这货玩，别人真的没法玩了" },
          },
        },
      ],
    };
  },
};
</script>

三、遍历渲染前两层评论组件

• 创建组件:一父组件,一子组件,一孙组件
• 引入并渲染: 父嵌套子,子嵌套孙
• 遍历评论数组渲染每一条的内容

效果

test.vue(父)

.<template>
  <div>
    <!-- 使用最新评论遍历数据,并把数据传给最新评论组件渲染 -->
    <MainComment
      v-for="(item, index) in commentList"
      :key="index"
      :commentData="item"
    />
  </div>
</template>

<script>
//引入最新评论组件
import MainComment from "@/components/test/MainComment";

export default {
  components: {
    //注册最新评论
    MainComment,
  },
  data() {
    return {
      // 评论应该是一个数组,里面的每一个对象都是一条评论,主要的数据就是评论内容
      commentList: [
        // 第一层
        { content: "有这货玩，别人真的没法玩了" },
        // 第二层
        {
          content: "还说鹰家要主走40吨的空投轻车，弃60吨的硬仗车，看看",
          parent: { content: "有这货玩，别人真的没法玩了" },
        },
        // 第三层:只有这种以上才需要递归
        {
          content:
            "坦克在无人机面前就是靶标，亚美尼亚战争还没看够啊？这玩意也只能打打小毛贼。[挨揍]",
          parent: {
            content: "还说鹰家要主走40吨的空投轻车，弃60吨的硬仗车，看看",
            parent: { content: "有这货玩，别人真的没法玩了" },
          },
        },
      ],
    };
  },
};
</script>

<style>
</style>

MainComment.vue(子)

• 需要注意父评论是子组件,需要先判断是否有父评论,还是只有一条的主评论

.<template>
  <div class="mainBox">
    <!-- 父评论实际是子组件,需要嵌套在最新评论里面 -->
    <!-- 判断是否有父评论,还是只有一条的主评论,有的话再传递数据给父评论,也就是孙子 -->
    <ParentComment v-if="commentData.parent" :parentData="commentData.parent" />
    <!-- 最新评论渲染 -->
    {{ commentData.content }}
  </div>
</template>

<script>
//引入父评论组件
import ParentComment from "@/components/test/ParentComment";
export default {
  // 接收数据
  props: ["commentData"],
  components: {
    // 注册父评论
    ParentComment,
  },
};
</script>

.<style lang="less" scoped>
.mainBox {
  padding: 10px;
  border: 1px solid#999999;
  background: #f8fcff;
}
</style>

ParentComment.vue(孙组件)

.<template>
  <div class="parentBox">
    <!-- 渲染父评论 -->
    {{ parentData.content }}
  </div>
</template>

<script>
export default {
  // 接收最新评论发过来的数据
  props: ["parentData"],
};
</script>

.<style lang="less" scoped>
.parentBox {
  padding: 10px;
  border: 1px solid#999999;
  background: #ffffee;
}
</style>

四、实现组件内部递归

效果

ParentComment.vue

• 判断当前的评论还有没有父评论,有的话就自己调用自己
• 递归组件语法, 必须起一个 name 然后就能在自己的 template 当中调用自己
• 自己调用自己的数据传递模式是一样的 也是 props
• name: "parent"
• <parent v-if="parentData.parent" :parentData="parentData.parent" />

.<template>
  <div class="parentBox">
    <!-- 开始递归,判断当前的评论还有没有父评论,有的话就自己调用自己 -->
    <parent v-if="parentData.parent" :parentData="parentData.parent" />
    <!-- 渲染父评论 -->
    {{ parentData.content }}
  </div>
</template>

<script>
export default {
  name: "parent",
  // 接收最新评论发过来的数据
  props: ["parentData"],
};
</script>

.<style lang="less" scoped>
.parentBox {
  padding: 10px;
  border: 1px solid#999999;
  background: #ffffee;
}
</style>