Vue - 组件递归

组件递归

当要渲染一个目录时，因为可能有嵌套数据，并且组件的层级未知，可以使用组件递归来解决

注意点：

1，使用递归时必须提供 name，也就是通过组件的 name 递归自己。

2，注意组件事件传递。

举例：

子组件

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <span @click="handleClick(item)">{{ item.name }}span>
      <RecursionList v-if="item.children?.length" :list="item.children" @clickItem="handleClick"/>
    li>
  ul>
template>

<script>
export default {
  name: 'RecursionList',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('clickItem', item)
    }
  }
}
script>

父组件

<template>
  <RecursionList :list="list" @clickItem="getItem" />
template>

<script>
import RecursionList from './components/RecursionList.vue'
export default {
  components: {
    RecursionList
  },
  data() {
    return {
      list: [
        { name: 'a' }, 
        { name: 'b' }, 
        { name: 'c', 
          children: [{ name: 'ca' }, { name: 'cb' }, { name: 'cc', children: [] }] 
        }
      ]
    }
  },
  methods: {
    getItem(item) {
      console.log(item)
    }
  }
}
script>

---

以上。