Vue3里只有script 标签的单文件组件怎么二次封装

在Vue3中，如果只使用`<script>`标签的单文件组件(SFC)并且希望进行二次封装，通常是为了创建更通用、可复用的功能组件或者库。这里是一种常见的做法：

1. **创建基础组件**:
- 首先，在一个`.vue`文件中，编写纯逻辑和视图层的代码，仅包含必要的HTML结构和计算属性、方法等。例如：

   <!-- my-component.vue -->
   <template>
     <div>{{ message }}</div>
   </template>

   <script setup>
   import { ref } from 'vue';

   const message = ref('');
   function showMessage(text) {
     message.value = text;
   }

   // 可选的事件监听和交互逻辑
   </script>

2. **提取公共逻辑**:
- 如果组件中有重复的逻辑或需要被多个组件共享的部分，可以将其抽取到单独的文件，如`mixins.js`或`utils.js`。

3. **封装为具名插件或自定义指令**:
- 使用Vue的命名插件（`extend`）功能，将组件注册成一个插件，以便在其他组件中导入并使用：

   // plugins/myComponent.js
   export default defineComponent({
     name: 'MyComponent',
     props: ['text'],
     setup(props) {
       return {
         showMessage,
         message: ref(props.text)
       };
     }
   });

4. **使用组件**:
- 现在可以在另一个组件中通过`import`引入这个封装后的插件，并作为props传递或直接使用：

   <!-- using-component.vue -->
   <template>
     <my-component :text="showMessageText" @showMessage="handleShowMessage"></my-component>
   </template>

   <script>
   import MyComponent from '@/plugins/myComponent.vue';
   
   const showMessageText = "Hello, world!";
   methods: {
     handleShowMessage() {
       showMessage("You clicked!");
     }
   }
   </script>