vite+ts+vue3 知识点（全局组件，局部组件，递归组件）

在Vite + TypeScript + Vue 3项目中，你可以通过以下方式注册全局、局部和递归组件：

1. 全局组件：

   在 main.ts 中使用 app.component 方法注册全局组件。

import { createApp } from 'vue'
import App from './App.vue'
import MyGlobalComponent from './components/MyGlobalComponent.vue'
 
const app = createApp(App)
 
// 注册全局组件
app.component('MyGlobalComponent', MyGlobalComponent)
 
app.mount('#app')

2. 局部组件：

   在需要使用组件的单文件组件中导入并在 components 选项中注册。

<script lang="ts">
import { defineComponent } from 'vue'
import MyLocalComponent from './MyLocalComponent.vue'
 
export default defineComponent({
  components: {
    MyLocalComponent
  }
})
</script>

3. 递归组件：

   递归组件在模板中通过名称引用自身。

<template>
  <div>
    <recursive-component />
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  name: 'recursive-component',
  // 递归组件需要通过 setup 函数返回的对象声明
  setup() {
    return {}
  }
})
</script>

注意：在使用递归组件时，必须通过 name 选项指定组件的名称，这样才能在模板中正确地递归引用它。