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>

---

以上。