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

  • 053_末晨曦Vue技术_处理边界情况之递归组件已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事:


递归组件

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

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 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> 

srccomponentsHelloWorld.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>