vue3组件封装完整代码

好的，以下是一个简单的 Vue3 组件封装的完整代码实例：

<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <slot></slot>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('click');
    };

    return {
      handleClick
    };
  }
});
</script>

<style scoped>
.my-component {
  background-color: #f0f0f0;
  padding: 20px;
}
</style>

这个组件包含一个标题和内容，以及一个按钮，当按钮被点击时会触发一个自定义事件。在组件的模板中，使用了 `props` 属性来接收父组件传递的数据，使用了 `slot` 属性来添加插槽，使用了 `emits` 属性来声明组件的事件，使用了 `setup` 函数来编写组件的逻辑代码。在样式中使用了 `scoped` 属性，使得组件的样式不会影响到其他组件。