Vue中如何实现父组件获取子组件的textarea与复选框值

核心思路 #

Vue中组件间无法直接通过v-model双向绑定子组件内部的表单元素，需要通过props传递初始值 + emit事件通知更新的方式实现父子数据联动，Vue3支持多v-model语法糖，能进一步简化代码。

步骤1：配置子组件（FormAnswer） #

子组件需要定义接收父组件数据的props，同时触发事件通知父组件更新数据：

<!-- FormAnswer.vue -->
<template>
  <div class="form-item">
    <!-- textarea绑定props值，输入时触发更新事件 -->
    <textarea 
      :value="answer"
      @input="$emit('update:answer', $event.target.value)"
      placeholder="输入内容"
    />
    <!-- checkbox同理 -->
    <label>
      <input 
        type="checkbox"
        :checked="isChecked"
        @change="$emit('update:isChecked', $event.target.checked)"
      />
      标记有效
    </label>
  </div>
</template>

<script setup>
// 定义接收的props
defineProps({
  answer: {
    type: String,
    default: ''
  },
  isChecked: {
    type: Boolean,
    default: false
  }
})

// 定义触发的事件
defineEmits(['update:answer', 'update:isChecked'])
</script>

步骤2：父组件中管理多子组件数据 #

父组件维护一个数组存储所有子组件的表单数据，通过v-for渲染子组件，并用v-model:xxx实现双向绑定：

<!-- ParentForm.vue -->
<template>
  <div class="parent-form">
    <!-- 循环渲染子组件 -->
    <FormAnswer
      v-for="(item, idx) in formList"
      :key="idx"
      v-model:answer="item.answer"
      v-model:isChecked="item.isChecked"
    />

    <!-- 新增选项按钮 -->
    <button @click="addNewItem">添加新选项</button>
    <!-- 查看数据按钮 -->
    <button @click="logFormData">查看当前数据</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FormAnswer from './FormAnswer.vue'

// 初始化表单数据列表
const formList = ref([
  { answer: '', isChecked: false }
])

// 添加新的选项
const addNewItem = () => {
  formList.value.push({ answer: '', isChecked: false })
}

// 打印当前所有表单数据
const logFormData = () => {
  console.log('当前表单数据:', formList.value)
}
</script>

步骤3：验证联动效果 #

运行后：

• 在子组件textarea输入内容，父组件formList中对应项的answer会实时更新
• 勾选/取消checkbox，对应项的isChecked状态同步变化
• 点击「查看当前数据」可在控制台看到完整的表单数据集合

Vue2兼容方案 #

如果使用Vue2，只需调整父组件的绑定方式（Vue2不支持多v-model语法糖）：

<!-- Vue2父组件中绑定子组件 -->
<FormAnswer
  v-for="(item, idx) in formList"
  :key="idx"
  :answer="item.answer"
  :is-checked="item.isChecked"
  @update:answer="item.answer = $event"
  @update:is-checked="item.isChecked = $event"
/>

子组件的props和emit写法调整为Vue2的语法即可。

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