美文网首页web开发前端Vue专辑
Vue + ts 深层次(无限)循环

Vue + ts 深层次(无限)循环

作者: 1994陈 | 来源:发表于2019-11-12 10:19 被阅读0次

    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

    相关文章

      网友评论

        本文标题:Vue + ts 深层次(无限)循环

        本文链接:https://www.haomeiwen.com/subject/smsfictx.html