结合ts 的vue 递归组件写法

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";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
@component({name: "listTree"}) // 需要在component 装饰器里注册name，用于递归自己
export default class listTreeComponent extends Vue {
	@Prop({default: ()=> []}) nodeData;
	@Prop({default: 1}) level;
}
</script>

注意这里用的不是 对象名称listTreeComponent ，而是需要在component 里注册name
话说坑的我好惨，在本地listTreeComponent 竟然是可以起作用的，然而发到线上就挂了，应用的组件没有解析成dom,都是泪啊

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>