【Vue】- 组件实现递归

使用name实现递归

目标: 可以用组件的name属性值, 来注册组件名字

问题: 组件名不是可以随便写的?

答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

components/Com.vue

 <template>
   <div>
       <p>我是一个Com组件</p>
   </div>
 </template>
 ​
 <script>
 export default {
     name: "ComNameHaHa" // 注册时可以定义自己的名字
 }
 </script>

1、循环出一级类别

2、判断如果有多级，再调用自身。

• 官网详细：

允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 `，这很没有语义。通过提供name` 选项，可以获得更有语义信息的组件树。

 父组件：

<!-- 
  二级嵌套 -- 递归组件 
  val.parent作为父组件对象，传入子组件
  v-if 作为判断val.parent对象是否为null，为null不显示当前判断的标签
  不叫v-if判断 如果监测到这个对象是null就会报错
-->
<commentNest v-if="val.parent" :obj="val.parent"></commentNest>

子组件：

<template>
  <div>
    <div class="commentItem">
      <div class="top">
        <div class="left">
          <span>{{obj.user.nickname}}</span> &nbsp;&nbsp;&nbsp;
          <span>2分钟前</span>
        </div>
        <span>回复</span>
      </div>
      <!-- 实现递归，调用自身 -- 核心代码 -->
      <comment-child v-if="obj.parent" :obj="obj.parent"></comment-child>
       
      <div class="bottom">{{obj.content}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment-child",    // 自身组件，可以调用自身
  props: {
    obj: Object,
  }
</script>