11.vue3 的全局组件，局部组件，递归组件

1.封装组件：

<template>
  <div class="card">
     <div class="card-header">
         <div>标题</div>
         <div>副标题</div>
     </div>
     <div v-if='content' class="card-content">
         {{content}}
     </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
    content:string
}
defineProps<Props>()

</script>
<style scoped lang='less'>
@border:#ccc;
.card{
    width: 300px;
    border: 1px solid @border;
    border-radius: 3px;
    &:hover{
        box-shadow:0 0 10px @border;
    }

    &-content{
        padding: 10px;
    }
    &-header{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @border;
    }
}
</style>

2.配置全局组件

在 main.ts 引入我们的组件跟随在 createApp(App) 后面 切记不能放到 mount 后面这是一个链式调用用

其次调用 component 第一个参数组件名称 第二个参数组件实例

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/css/reset/index.less";
import Card from "./components/Card/index.vue";

createApp(App).component("Card", Card).mount("#app");

全局组件使用：

直接在其他 vue 页面 立即使用即可 无需引入

3.批量注册全局组件

可以参考element ui 其实就是遍历一下然后通过 app.component 注册

4.配置局部组件

一个组件内（A） 通过 import 去引入别的组件(B) 称之为局部组件

2.直接使用文件名当组件名

3.使用插件

unplugin-vue-define-options

"types": ["unplugin-vue-define-options/macros-global"],