如何在 Vue 3 中创建和使用全局组件？

在 Vue 3 中创建和使用全局组件的步骤如下：

1. 创建一个全局组件文件，例如 MyGlobalComponent.vue：

<template>
  <div class="global-component">这是一个全局组件</div>
</template>
 
<script>
export default {
  name: 'MyGlobalComponent'
}
</script>
 
<style scoped>
.global-component {
  /* 样式 */
}
</style>

2. 在 main.js 或 main.ts 中引入组件并注册为全局组件：

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')

3. 在任何其他组件模板中，你可以直接使用 <MyGlobalComponent /> 标签来使用这个全局组件：

<template>
  <div>
    <MyGlobalComponent />
  </div>
</template>
 
<script>
export default {
  name: 'SomeOtherComponent'
}
</script>

确保你的全局组件文件路径正确，并且在注册全局组件时使用的名字（这里是 'MyGlobalComponent'）要和组件内部 name 选项相匹配。这样你就可以在任何其他组件中使用这个全局组件了。