Vue3 的方式封装

Vue3 的封装通常是指将一些功能模块或UI组件包装成可复用的独立单元。对于 Vue3，可以按以下步骤封装组件：

1. **设计接口**：
定义组件的行为接口，包括属性（props）、方法（methods）以及可能的自定义事件。例如，如果封装的是一个表单组件，可能会有 `value`、`onChange` 等 prop。

// 在接口文件中
export interface FormComponentProps {
  value: any;
  onChange: (newValue: any) => void;
}

2. **实现组件**：
使用 Vue3 的 `setup` 函数来编写组件的内部逻辑。在 `setup` 中初始化状态变量、监听生命周期钩子和响应式依赖。

<!-- Form.vue -->
<template>
  <div>
    <!-- 元素模板，如输入框、按钮等 -->
    <input v-model="value" @change="handleChange" />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

interface Props extends FormComponentProps {}
const useForm = (props: Props): any => {
  const inputValue = ref(props.value);

  const handleChange = (e: Event) => {
    // 更新值并触发onChange回调
    props.onChange(e.target.value);
    inputValue.value = e.target.value; // 或者直接修改props.value
  };

  onMounted(() => {
    // 可能的初始操作
  });

  return {
    inputValue,
    handleChange,
  };
};

export default defineComponent({
  props: Props,
  setup(props) {
    return useForm(props);
  },
});
</script>

3. **外部使用**：
在其他组件中导入并使用封装后的组件，只需提供所需的 prop 和处理回调即可。

<template>
  <FormComponent :value="formData.value" @onChange="updateFormData" />
</template>

<script>
import FormComponent from './Form.vue';

export default {
  components: {
    FormComponent,
  },
  data() {
    return {
      formData: {
        value: '',
      };
  },
  methods: {
    updateFormData(newValue) {
      this.formData.value = newValue;
    },
  },
};
</script>