Vue + ts 深層次(無限)循環(huán)

1.父組件:
<template>
<div class="balance">
<son :item="chartData"></son>
</div>
</template>

<script lang="ts">
import { Component,Vue } from "vue-property-decorator";
import son from './son.vue'

@Component({
components: {son}
})

2.子組件
<template>
<div class="son">
<ul v-for="item in item" :key="item.index">
<li>{{ item.name }}</li>
<ul v-if="item.children">
<son :item="item.children"></son>
</ul>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class son extends Vue {
@Prop(Array) item!: [];
mounted() {
this.item;
console.log(this.item);
}
}
</script>

效果:


屏幕快照 2019-11-12 上午10.19.03.png
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容