vue3 封装全局组件

要封装一个全局组件，需要遵循以下步骤：

1. 创建一个组件 Vue 文件，定义组件的模板、样式和行为。
2. 在 main.js 中导入组件，并且通过 Vue.component() 将组件注册为全局组件。
3. 在模板中使用组件。

下面是一个简单的示例：

1. 创建一个 MyComponent.vue 文件，定义组件：

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

<style>
.my-component {
  background-color: #eee;
  padding: 10px;
}
</style>

2. 在 main.js 中导入组件，并注册为全局组件：

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

Vue.component('my-component', MyComponent)

3. 在模板中使用组件：

<template>
  <div>
    <my-component title="Hello" content="This is my component"></my-component>
  </div>
</template>

现在，你就可以在任何组件中使用 `<my-component>` 标签来调用该组件了。