组件注册方法

局部组件

在页面中注册局部组件，只需要直接导入即可

<template>
  <myComponent></myComponent>
</template>

<script setup>
import myComponent from './myComponent' // setup语法糖中，导入即可直接使用

</script>

<style lang="scss" scoped>

</style>

全局组件

需要在main.ts内全局注册，注册后的组件在页面中可以直接使用

import { createApp } from 'vue'
import App from './App.vue'

import myComponent from '@/components/myComponent' // 导入需要注册的全局组件

const app = createApp(App)
app.mount('#app')

app.component('myComponent', myComponent) // 这里可以重新定义组件名称

export default app

批量注册全局组件

可以参考 element-plus 中导入所有图标的做法

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

递归组件

递归组件： 与写js函数递归是一样的，都是自己调用自己，通过一个条件来结束调用

案例：树状数据递归

// Tree.vue 
<template>
  <div class="tree" v-for="item in data">
    <input v-model="item.checked" type="checkbox"> <span>{{ item.name }}</span>

    <Tree v-if="item?.children.length" :data="item.children"></Tree>
  </div>
</template>

<script setup lang="ts">
interface Tree {
  name: string,
  checked: boolean,
  children: Tree[]
}

defineProps<{
  data?: Tree[]
}>()

</script>

<style scoped>

</style>

注意

• 递归组件时，重新调用该组件可以通过文件名来调用

• 或者通过设置name属性来给组件定义名称

因为setup语法糖模式无法给组件设置name属性，可以通过增加一个script通过export添加

<script>
export default {
  name: 'Tree' // 这里可以自定义组件名，递归组件时使用设置的值进行递归
}
</script>