Vue中父组件Form如何获取子组件InputContainer内input的提交值

方案1：让InputContainer支持v-model（推荐） #

这种方式完全贴合Vue响应式设计，父组件直接绑定数据，提交时直接读取变量即可，无需操作DOM。

修改InputContainer.vue，使其支持v-model：

<template>
  <div class="input-container">
    <label :for="name">{{ label }}</label>
    <input
      type="text"
      :id="name"
      :name="name"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script setup>
defineProps(['modelValue', 'label', 'name']);
defineEmits(['update:modelValue']);
</script>

在Form.vue中通过v-model绑定数据：

<template>
  <form @submit.prevent="submitResource">
    <InputContainer v-model="title" label="标题" name="title" />
    <InputContainer v-model="description" label="描述" name="description"/>
    <InputContainer v-model="link" label="链接" name="link" />
    <BaseButton type="submit" class="submit">Add Resource</BaseButton>
  </form>
</template>

<script setup>
import BaseButton from './BaseButton.vue';
import InputContainer from './InputContainer.vue';
import { ref } from 'vue';

const title = ref('');
const description = ref('');
const link = ref('');

const submitResource = () => {
  console.log('标题:', title.value);
  console.log('描述:', description.value);
  console.log('链接:', link.value);
  // 直接使用这些值提交即可
};
</script>

方案2：子组件暴露内部input的ref #

如果不想用v-model，可以在子组件中给input定义ref并暴露，父组件直接访问该ref取值，比querySelector更规范。

修改InputContainer.vue：

<template>
  <div class="input-container">
    <label for="example">Example</label>
    <input
      ref="inputRef"
      type="text"
      id="example"
      name="example"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const inputRef = ref(null);
defineExpose({ inputRef });
</script>

在Form.vue中访问子组件暴露的input：

<template>
  <form @submit.prevent="submitResource">
    <InputContainer ref="titleRef" />
    <InputContainer ref="descriptionRef"/>
    <InputContainer ref="linkRef" />
    <BaseButton type="submit" class="submit">Add Resource</BaseButton>
  </form>
</template>

<script setup>
import BaseButton from './BaseButton.vue';
import InputContainer from './InputContainer.vue';
import { ref } from 'vue';

const titleRef = ref(null);
const descriptionRef = ref(null);
const linkRef = ref(null);

const submitResource = () => {
  console.log('标题:', titleRef.value.inputRef.value);
  console.log('描述:', descriptionRef.value.inputRef.value);
  console.log('链接:', linkRef.value.inputRef.value);
};
</script>

方案3：利用原生FormData收集表单值 #

如果不想修改子组件、也不想绑定过多变量，可以直接用原生FormData读取整个表单的输入值，简单高效。

先给InputContainer.vue添加name和label的props：

<template>
  <div class="input-container">
    <label :for="name">{{ label }}</label>
    <input
      type="text"
      :id="name"
      :name="name"
    />
  </div>
</template>

<script setup>
defineProps(['name', 'label']);
</script>

然后修改Form.vue：

<template>
  <form ref="formRef" @submit.prevent="submitResource">
    <InputContainer name="title" label="标题" />
    <InputContainer name="description" label="描述"/>
    <InputContainer name="link" label="链接" />
    <BaseButton type="submit" class="submit">Add Resource</BaseButton>
  </form>
</template>

<script setup>
import BaseButton from './BaseButton.vue';
import InputContainer from './InputContainer.vue';
import { ref } from 'vue';

const formRef = ref(null);

const submitResource = () => {
  const formData = new FormData(formRef.value);
  console.log('标题:', formData.get('title'));
  console.log('描述:', formData.get('description'));
  console.log('链接:', formData.get('link'));
};
</script>

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