Vue.js如何从子组件表单获取title输入字段数据？

看起来你遇到的是父子组件数据双向绑定的问题——你的自定义<form-input>组件没有和父组件的状态同步，所以提交时拿不到最新的输入值。下面是具体的解决步骤：

第一步：在父组件（App.vue）中维护表单状态 #

首先，你需要在App.vue的data里定义一个用来存储表单数据的对象，然后通过v-model绑定到自定义组件上：

<template>
  <form v-on:submit.prevent="getFormValues">
    <page-header :title="'Banner toevoegen'"></page-header>
    <!-- 用v-model绑定到formData.title，替换原来的:value="''" -->
    <form-input 
      :label="'title'" 
      :labelvalue="'Titel'" 
      :type="'text'" 
      :placeholder="''" 
      :name="'title'" 
      v-model="formData.title" 
      :classname="'form-control'" 
      :id="''"
    ></form-input>
    <!-- 补充提交按钮示例 -->
    <button type="submit">提交表单</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 定义表单数据对象，初始化title为空字符串
      formData: {
        title: ''
      }
    }
  },
  methods: {
    getFormValues() {
      // 现在可以直接拿到最新的title值了！
      console.log('获取到的title值：', this.formData.title);
      // 这里编写你的表单提交逻辑
    }
  }
}
</script>

第二步：修改自定义组件（form-input.vue）支持双向绑定 #

Vue的自定义组件要实现v-model，需要满足两个核心条件：

1. 接收一个名为value的prop（Vue3.x为modelValue）
2. 当输入内容变化时，触发input事件（Vue3.x为update:modelValue）并传递新值

修改你的form-input.vue代码：

<template>
  <div class="form-group">
    <label :for="id">{{ labelvalue }}</label>
    <!-- 绑定value到组件的value prop，输入时触发input事件同步数据 -->
    <input
      :type="type"
      :placeholder="placeholder"
      :name="name"
      :class="classname"
      :id="id"
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  props: {
    // 确保接收value prop作为输入值的来源
    value: {
      type: String,
      default: ''
    },
    label: String,
    labelvalue: String,
    type: String,
    placeholder: String,
    name: String,
    classname: String,
    id: String
  }
}
</script>

核心原理说明 #

• 父组件的formData.title通过v-model绑定到子组件的value prop，实现父到子的单向数据传递
• 子组件输入框触发input事件时，通过$emit('input', 新值)把最新输入内容传给父组件，v-model会自动更新父组件的formData.title，实现子到父的数据同步
• 最终在提交方法getFormValues中，就能直接访问到最新的输入值

如果你的项目使用Vue3.x，只需要把value prop改为modelValue，把$emit('input', ...)改为$emit('update:modelValue', ...)即可，核心逻辑完全一致。

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