Vue 3 精髓：如何轻松创建和使用全局组件

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

1. 创建全局组件文件：例如MyGlobalComponent.vue。

<template>
  <div class="global-component">
    <p>这是一个全局组件</p>
  </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.component('AnotherComponent', AnotherComponent)
 
app.mount('#app')

3. 在任何其他组件模板中直接使用全局组件，无需再次导入。

<template>
  <div>
    <MyGlobalComponent />
  </div>
</template>
 
<script>
export default {
  name: 'SomeComponent'
  // 其他选项...
}
</script>

这样，你就创建并注册了一个全局组件，在应用的任何部分都可以直接使用这个组件，无需再次导入。