Vue 3 关于组件的注册

        组件的注册有两种方式：全局组件注册、局部组件注册

        一个小栗子，全局组件注册：

<template>
  <div class="box">
    <div style="padding: 10px;" class="intro">这是个需要在全局注册的组件</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: antiquewhite;
}
</style>

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

import GlobalSyncCompo from './views/registerComp/components/index.vue';

const app = createApp(App)

// 全局注册的同步组件
app.component('GlobalSyncCompo', GlobalSyncCompo);

<template>
  <div class="box">
    <div style="padding: 10px;">使用全局注册的同步组件，并使用大写插入template中:</div>
    <MyAsyncComponent></MyAsyncComponent>
    <div style="padding: 10px;">使用全局注册的同步组件，并使用小写插入template中:</div>
    <my-async-component></my-async-component>
  </div>
</template>
<script setup>
</script>
<style>
</style>

         三段代码分别为，组件文件、main函数文件、使用全局组件的vue文件

        一个小栗子，单文件中使用局部注册的组件，在script setup中使用：

<template>
  <div class="box">
    <div style="padding: 10px;">这是一个局部注册的组件，在单文件中被注册</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(135, 210, 210);
}
</style>

<template>
  <div class="box">
    <div style="padding: 10px;">注册局部组件，在script setup语法中注册并使用:</div>
    <A></A>
  </div>
</template>
<script setup>
import A from "./components/A.vue"
</script>
<style>
</style>

        import以后可以在template中直接使用

        一个小栗子，使用局部注册组件，在非script setup中 ：

<template>
  <div class="box">
    <div style="padding: 10px;">这是一个局部注册的组件，在单文件中被注册</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(135, 210, 210);
}
</style>

<template>
  <div class="box">
    <div>在子组件B中使用局部注册的组件A，在没有script setup的语法环境中：</div>
    <A></A>
  </div>
</template>
<script>
import A from "./A.vue"
export default{
  components: {
    A
  },
  setup() {
    
  }
}
</script>
<style></style>