Vue3 中如何封装 Input 组件并统一表单数据

在 Vue3 的项目开发中，合理封装 Input 组件并统一管理表单数据，能有效提升开发效率与代码的可维护性。

创建一个 Input 组件。在 Vue3 里，可以使用 script setup 语法糖来简化组件的创建过程。在组件文件中，定义组件的模板、props 和 emits。例如，一个基础的 Input 组件可能接收 modelValue 作为双向绑定的值，placeholder 用于设置输入框的占位文本，type 来指定输入框类型，如 text、password 等。通过 emits 触发 update:modelValue 事件来实现双向数据绑定。

<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  }
});

const emits = defineEmits(['update:modelValue']);
</script>

接下来，统一表单数据。可以利用 Vuex 或 Pinia 这类状态管理库来集中存储表单数据。以 Pinia 为例，创建一个 store 来管理表单数据。在 store 中定义 state 存储表单的各个字段值，定义 actions 来更新这些值。

import { defineStore } from 'pinia';

export const useFormStore = defineStore('form', {
  state: () => ({
    formData: {
      username: '',
      password: ''
    }
  }),
  actions: {
    updateFormData(field, value) {
      this.formData[field] = value;
    }
  }
});

在使用 Input 组件时，将其 modelValue 绑定到 store 中的表单数据字段，并在输入值变化时通过 actions 更新 store 中的数据。

<template>
  <div>
    <Input
      :modelValue="formStore.formData.username"
      placeholder="请输入用户名"
      @update:modelValue="formStore.updateFormData('username', $event)"
    />
    <Input
      :modelValue="formStore.formData.password"
      type="password"
      placeholder="请输入密码"
      @update:modelValue="formStore.updateFormData('password', $event)"
    />
  </div>
</template>

<script setup>
import Input from './Input.vue';
import { useFormStore } from '@/stores/form';

const formStore = useFormStore();
</script>

通过这样的方式，在 Vue3 中成功封装了 Input 组件，并实现了表单数据的统一管理，让代码结构更清晰，维护更便捷。