Vue表单组件重构：可读性与复杂度的权衡问题

Great question—this is a super common pain point when refactoring large Vue forms into manageable components, and you absolutely don’t have to trade readability for communication complexity. There are several lighter-weight alternatives to Vuex that keep your component structure clean without the overhead of full state management. Here are my go-to solutions:

1. Use provide/inject with a Reactive Form Object #

This is my favorite approach for deeply nested form components. Instead of passing props down through every level, you can provide a single reactive form data object from the parent component and inject it directly into any child (or grandchild) component that needs it.

Example Implementation: #

Parent component (the root form container):

<script setup>
import { reactive, provide } from 'vue'
import UserSection from './UserSection.vue'
import AddressSection from './AddressSection.vue'

// Reactive form state - all fields live here
const formData = reactive({
  user: {
    name: '',
    email: ''
  },
  address: {
    street: '',
    city: '',
    zipCode: ''
  }
})

// Make the form data available to all child components
provide('formData', formData)
</script>

<template>
  <div class="large-form">
    <UserSection />
    <AddressSection />
  </div>
</template>

Child component (e.g., UserSection.vue, even if it has its own children):

<script setup>
import { inject } from 'vue'
import NameInput from './NameInput.vue'

// Inject the reactive form data directly
const formData = inject('formData')
</script>

<template>
  <div class="user-section">
    <h3>User Information</h3>
    <NameInput /> <!-- This component can also inject formData! -->
    <label>Email:</label>
    <input v-model="formData.user.email" />
  </div>
</template>

This eliminates prop drilling entirely—any component in the tree can access and modify the form data directly, while keeping your parent component clean and focused on structure.

2. Custom v-model for Two-Way Binding #

For simpler, shallow component hierarchies, customizing v-model lets you maintain two-way binding between parent and child components without manual prop/emit boilerplate.

Example Implementation: #

Child component (a reusable form input):

<script setup>
// Define the prop for v-model value
const props = defineProps(['modelValue'])
// Define the emit to update the parent
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div class="form-field">
    <label>{{ label }}</label>
    <input 
      :value="props.modelValue"
      @input="emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

Parent component usage:

<script setup>
import { reactive } from 'vue'
import CustomInput from './CustomInput.vue'

const formData = reactive({
  username: '',
  password: ''
})
</script>

<template>
  <CustomInput 
    label="Username"
    v-model="formData.username"
  />
  <CustomInput 
    label="Password"
    v-model="formData.password"
  />
</template>

For intermediate components (e.g., a section that groups multiple inputs), you can pass a nested reactive object via v-model to keep data flow tight:

<!-- Parent -->
<AddressSection v-model="formData.address" />

<!-- AddressSection.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <div>
    <input v-model="props.modelValue.street" />
    <input v-model="props.modelValue.city" />
  </div>
</template>

3. Scoped Slots for UI-Focused Components #

If your split components are purely for organizing UI (not containing complex logic), scoped slots let you pass the form data directly to the slot content, avoiding component communication entirely.

Example Implementation: #

Section component (purely for layout/styling):

<template>
  <div class="form-section">
    <h3>{{ sectionTitle }}</h3>
    <!-- Pass form data to the slot as a prop -->
    <slot :form="form" />
  </div>
</template>

<script setup>
defineProps(['sectionTitle', 'form'])
</script>

Parent component usage:

<script setup>
import { reactive } from 'vue'
import FormSection from './FormSection.vue'

const formData = reactive({ /* ... */ })
</script>

<template>
  <FormSection 
    sectionTitle="User Info"
    :form="formData.user"
  >
    <!-- Use the slot's form prop directly -->
    <template v-slot="{ form }">
      <input v-model="form.name" />
      <input v-model="form.email" />
    </template>
  </FormSection>
</template>

When to Choose Which? #

• provide/inject: Best for deeply nested form components (3+ levels) where prop drilling becomes unwieldy.
• Custom v-model: Ideal for shallow hierarchies (1-2 levels) where you want explicit, controlled data flow.
• Scoped Slots: Perfect for UI-only components that don’t need their own state logic.

Final Thought #

You don’t have to accept complex component communication as a cost of readable code. These approaches let you keep your form split into modular, maintainable components while keeping data flow simple. Vuex is still a valid option if your app has cross-cutting state needs beyond just this form, but for form-specific refactoring, these lighter tools are usually more than enough.

内容的提问来源于stack exchange，提问作者GWed