学习Vue3 第十二章（递归组件）

原理跟我们写js递归是一样的，自己调用自己，通过一个条件来结束递归，避免内存泄漏

定义了一份树形的数据

export const treeData = [  {    label: 'Level one 1',    children: [      {        label: 'Level two 1-1',        children: [          {            label: 'Level three 1-1-1',          },        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
    ],
  },
]

父组件

 <Tree :data="treeData" />

递归组件

1. 子组件在调用自己的时候可以直接用文件名当组件名
2. 可以在增加一个script标签, 通过export default导出一个name,用name

tips

.vue文件里只能存在一个带setup语法糖的script标签，但是不带setup的可以出现多个

<template>
  <div v-for="item in data" :key="item.label" style="margin-left: 10px">
    <div>{{ item.label }}</div>
    <!-- <Tree :data="item.children" v-if="item?.children?.length" /> -->
    <yoga-tree :data="item.children" v-if="item?.children?.length" />
  </div>
</template>
<!-- setup语法糖的只能存在一个 -->
<script setup>
import { ref, reactive } from 'vue'
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})
</script>

<!-- 不带setup语法糖的可以存在多个 -->
<script>
export default {
  name: 'yoga-tree', // 可以
}
</script>
<style scoped lang="scss"></style>