vue3封装组件

Vue3 的组件封装和 Vue2 有些不同，以下是一个基本的 Vue3 组件封装的示例：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    // 组件属性
  },
  data() {
    return {
      // 组件数据
    };
  },
  methods: {
    // 组件方法
  },
  mounted() {
    // 组件挂载后执行的代码
  },
});
</script>

在这个示例中，我们使用了 `defineComponent` 来定义一个组件。 `name` 属性指定了组件的名称， `props` 属性用于定义组件的属性， `data` 属性用于定义组件的数据， `methods` 属性用于定义组件的方法， `mounted` 钩子函数用于定义组件挂载后执行的代码。

除了以上示例中的属性和钩子函数外，Vue3 还提供了许多新的特性和 API，例如 `setup` 函数、 `Teleport` 组件、 `ref` 和 `reactive` 等，你可以根据自己的需求来选择使用。