053_末晨曦Vue技术_处理边界情况之递归组件

递归组件

点击打开视频讲解更加详细

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

name: 'unique-name-of-my-component'

当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。

Vue.component('unique-name-of-my-component', {
  // ...
})

稍有不慎，递归组件就可能导致无限循环：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

类似上述的组件将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。

完整案例：

<template>
  <div id="app">
    <HelloWorld :list="list"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return {
      list:[
        { 
          name:'末晨曦吖',
          child:[
            { name:'末晨曦吖1' },
            { name:'末晨曦吖2' },
          ]
        },
        { 
          name:'满天星辰',
          child:[
            { name:'不及你' },
            { name:'吖' },
          ]
        },
      ]
    } 
  },
  mounted() {

  },
  components:{
    HelloWorld
  },
  methods:{
    
  }
}
</script>

<style scoped>
 
</style>

src\components\HelloWorld.vue

<template>
  <div class="hello">
    <div v-for="(item,index) in list" :key="index">
      <div>{{ item.name }}</div>
      <!-- 数组嵌套层次少时可以用 -->
      <!-- <div v-if="item.child">
        <div v-for="(data,inx) in item.child" :key="inx">{{ data.name }}</div>
      </div> -->

      <!-- 使用递归组件  多层嵌套 -->
      <div v-if="item.child">
        <HelloWorld :list="item.child"></HelloWorld>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['list'],
  data(){
    return{
      
    }
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>

</style>