结合 ts 的 vue 递归组件写法

结合 ts 的 vue 递归组件写法

• vue 通用递归组件写法：在本组件内使用自己注册的 name 来引用自身

<template>
    <div>
        <p>{{data.text}}</p>
        <listTree :level="level + 1" :nodeData="data.children" v-if="data.children"> </listTree>
    </div>
</template>
<script>
    export default {
        name: 'listTree', // name用来在本组件内引用自己
        prop: {
            nodeData: {
                default: () => [],
            },
            level: {
                default: 1,
            },
        },
    }
</script>

• vue 结合 ts 来使用时，递归组件的写法：通过 name 来引用，关键点在 name 设置的位置

<div>
<p>{{data.text}}</p>
<listTree
	:level="level + 1"
	:nodeData="data.children"
	v-if="data.children">
</listTree>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@component({name: "listTree"}) // 需要在component 装饰器里注册name，用于递归自己
export default class  extends Vue {
	@Prop({default: ()=> []}) nodeData;
	@Prop({default: 1}) level;
}
</script>