vue 组件递归

作者: 忘记_3a6a | 来源:发表于2020-04-23 16:29 被阅读0次

父组件 test.vue

<template>
  <!-- <ul>
    <li>
      AAA
      <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
      </ul>
    </li>
    <li>BBB</li>
    <li>CCC</li>
  </ul> -->
  <ul>
      <ultestVue :uldatas="uls"></ultestVue>
  </ul>
</template>
<script>
import ultestVue from './ultest.vue';
export default {
components:{ultestVue},
  data() {
    return {
      uls: [
        {
          title: "AAA",
          uls: [
            {
              title: "1111",
              uls: []
            },
            {
              title: "2222",
              uls: []
            },
            {
              title: "3333",
              uls: []
            }
          ]
        },
        {
          title: "BBBB",
          uls: []
        },
        {
          title: "CCCC",
          uls: []
        }
      ]
    };
  }
};
</script>

子组件 ultest.vue

<template>
  <div>
    <li v-for="(item,index,key) in uldatas" :index="index" :item="item" :key="key">
      {{item.title}}
      <ul >
 <!-- 递归,组件名与name相同 -->
        <test :uldatas="item.uls"></test>
      </ul>
    </li>
  </div>
</template>
<script>
export default {
  name: "test",
  props: {
    uldatas: {
      type: Array,
      required: true
    }
  }
};
</script>