Vue3中通过父子组件实现一个递归组件

蔚落 2023-10-10 18:09 123阅读 0赞

通过这个父子组件的传值和属性的定义，还是学到了不少的东西，比如如何在子组件里定义属性的时候，使用ts定义类型，然后让模板页面有代码提示。还有子组件里面怎么实现自己引用自己实现递归？

实现的效果是：

![99ddec59b4924e1a9178b80b7b17cf7b.png][]

子组件代码：

<template>
      <div v-for="(item, index) in treeData" :key="index" class="treeBox">
        <input type="checkbox" :checked="item.check"><span>{
       { item.name }}</span>
        <MyTree v-if="item.children?.length" :tree-data="item.children"></MyTree>
      </div>
    </template>
    
    <script setup lang="ts">
    interface tree {
      name: string
      check: boolean
      children?: tree[]
    }
    
    // 定义普通类型
    // defineProps({
    //   treeData: {
    //     type: Array,
    //     default: ()=> [{
    //       name:"1-1",
    //       check: true,
    //       children:[]
    //     }]
    //   }
    // })
    
    // 定义带类型的
    defineProps<{
      treeData: tree[]
    }>()
    </script>
    
    <style scoped>
    .treeBox{
      margin-left: 20px;
    }
    </style>

父组件代码：

<template>
      <div>
        <MyTree :treeData="data"></MyTree>
      </div>
    </template>
    
    <script setup lang="ts">
    import MyTree from './views/MyTree.vue'
    import { ref, reactive } from 'vue'
    
    interface tree {
      name: string
      check: boolean
      children?: tree[]
    }
    
    const data = reactive<tree[]>([
      {
        name: '1-1',
        check: false,
        children: [
          {
            name: '1-2',
            check: false,
            children: []
          }
        ]
      },
      {
        name: '2-1',
        check: true,
        children: [
          {
            name: '2-2',
            check: false,
            children: [
              { name: '2-3', check: true },
              { name: '2-4', check: true },
              { name: '2-5', check: true }
            ]
          }
        ]
      },
      {
        name: '3-1',
        check: false,
        children: [
          {
            name: '3-2',
            check: false,
            children: []
          }
        ]
      },
      {
        name: '4-1',
        check: false,
        children: [
          {
            name: '4-2',
            check: false,
            children: []
          }
        ]
      }
    ])
    </script>
    
    <style scoped></style>

[99ddec59b4924e1a9178b80b7b17cf7b.png]: https://img-blog.csdnimg.cn/99ddec59b4924e1a9178b80b7b17cf7b.png