遞回組件
點擊打開視頻講解更加詳細
組件是可以在它們自己的模板中呼叫自身的，不過它們只能通過 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 >
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502333.html
標籤：其他
下一篇：大家都能看得懂的原始碼 - 如何封裝 cookie/localStorage/sessionStorage hook?