1.如何让一个组件自己显示自己？

步骤：

1.在组件内设定 name 属性
2.使用这个 name 属性作为标签在组件自己的template里面渲染
3.注意为了避免死循环，需要指定终止条件

下面是一个vue脚手架创建的示例

如图：

现在可以将这个组件引入到home中看看效果

就有了下图效果

2.用组件递归实现评论盖楼的功能

目标：将下面这段评论数据以楼层的形式渲染到页面

comments: [
        // parent 为回复的用户信息
        {
          content: "奥利给，兄弟萌",
          user: "王尼玛",
          // 第一层楼
          parent: {
            content: "蜜汁小汉堡，干了噢",
            user: "老八",
          },
        },
        {
          content: "一giao窝里giao giao",
          user: "小阿giao",
          //   第一层楼
          parent: {
            content: "你不去参加中国新说唱可惜了",
            user: "野马",
            //   第二层楼
            parent: {
              content: "画画的baby，画画的baby,奔驰的小野马和带刺的玫瑰",
              user: "老giao",
              //   第三层楼
              parent: {
                content: "去参加新说唱，有推荐学的歌没？",
                user: "药水",
              },
            },
          },
        },
        {
          content: "谁TM买小米儿！",
          user: "铁蛋",
        },
]

2.1-用vue脚手架搭建一个基本的结构

创建两个组件：

Comments：展示用户评论的组件

Floor：展示用户回复的用户评论(即我们需要递归的组件)

2.2-在Home首页引入Comments组件，进行第一层评论数据渲染

2.3-Comments组件获取评论数据进行渲染

假设comments为后台获取的评论数据

页面上就可以渲染出第一层的评论数据

2.4-引入Floor递归渲染回复用户的楼层

当评论数据中有parent的时候意味着有回复用户信息，因此需要引入Floor组件进行递归渲染这些数据，因为我们无法预知它一共有多少层

2.5-Floor组件接收Comments传递过来的数据，递归渲染

现在页面显示就是如下样式：

2.6-楼层深度计算

a.在Floor组件中定义一个calcuFloorDeep计算楼层深度的方法，计算楼层深度，该方法接受两个参数：

第一个参数：当前评论数据是否含有parent对象(即是否有回复用户，如果有就再次调用该方法)

第二个参数：接收当前楼层数

b.再定义一个计算属性，调用calcuFloorDeep方法，传入当前数据的parent与初始楼层1

差不多效果就完成了：

Vue使用组件递归实现评论盖楼功能笔记