vue3如何二次封装组件的所有方法

在 Vue3 中，如果你想要对已经存在的组件进行二次封装，通常是将其作为一个库或更高层次的组件来重用，你可以创建一个新的组件并从原始组件中提取共享功能。以下是一个基本步骤：

1. **分析组件**: 首先理解原始组件的功能和结构，看看哪些部分是可以复用的，例如数据处理、事件监听、计算属性等。

2. **重构公共逻辑**: 创建一个新的 Vue 组件，比如 `MyCustomComponent.vue`，并在 `setup()` 函数中引入原组件的 `props` 和 `emits`，并将它们复制到新的组件里。

   <script setup>
     import { ref, onMounted } from 'vue';
     import OriginalComponent from './OriginalComponent.vue';

     const originalProps = defineProps({
       // 原始组件的 props
     });

     // 将原组件的生命周期钩子和方法抽取出来
     onMounted(() => {
       // 如果有初始化逻辑
       originalProps.init();
     });
     function sharedMethod() {
       // 复制原组件的公共方法
       originalProps.sharedFunction();
     }
   </script>

3. **分发事件**: 在新组件中处理来自原组件的事件，并可能转发给原组件或处理自身的行为。

4. **提供或注入**: 如果有必要，可以使用 `provide/inject` 或者 `reactive` 和 `ref` 在新组件中暴露或者使用父组件的数据。

5. **使用**: 在父组件或其他需要的地方使用这个新封装的组件，并传递必要的 props。

<template>
  <MyCustomComponent :prop1="parentProp1" />
</template>

<script>
import MyCustomComponent from './MyCustomComponent.vue';

export default {
  components: {
    MyCustomComponent,
  },
  setup(props) {
    const parentProp1 = ref(props.parentProp1);
    
    // 使用新组件...
  },
};
</script>