Vue.js无需按钮通过emit实现子组件向父组件传值方法

不需要为每道题配置单独的保存按钮，以下几种方案都可以实现子组件向父表单的自动传值，按需选择即可：

1. 监听值变化实时同步（改造成本最低） #

保留现有代码的整体结构，只需要删掉子组件里的保存按钮，加一个值监听器，输入内容变化时自动触发传值事件就行。
修改后的子组件代码：

<template>
  <input type="text" v-model="answer1"/>
  <!-- 移除单独的Save按钮 -->
</template>

<script>
export default {
  data() {
    return {
      answer1: ''
    };
  },
  watch: {
    answer1(newVal) {
      // 输入内容变化时自动同步给父组件
      this.$emit('display-answer-1', newVal);
    }
  }
};
</script>

如果子组件不需要对输入内容做中间态处理，还可以直接用Vue的双向绑定语法，把子组件本地状态删掉，直接通过props和update事件和父组件同步：
父组件调整为：

<template>
  <question1 v-model:answer1="answer1" />
  <!-- 其他问题组件同理绑定 -->
</template>

<script>
import Question1 from '...path...';
export default{
  components: { Question1 },
  data() {
    return {
      answer1: ''
    }
  }
};
</script>

对应子组件代码：

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

<script>
export default {
  props: {
    answer1: {
      type: String,
      default: ''
    }
  }
};
</script>

这种写法下输入框内容和父组件的answer1值完全实时同步，不需要任何点击操作触发传值。

2. 父组件统一管理全表单状态 #

如果问题数量比较多，建议把所有答案统一存在父组件的一个表单对象里，所有问题子组件只负责接收对应的值、上报输入变化，不需要每个子组件单独维护自己的状态、定义单独的事件名。整个表单只需要在最后放一个统一的提交按钮即可。
父组件示例代码：

<template>
  <question1 
    :value="formData.answer1" 
    @update:value="val => formData.answer1 = val"
  />
  <question2
    :value="formData.answer2"
    @update:value="val => formData.answer2 = val"
  />
  <!-- 全表单仅需一个统一提交按钮 -->
  <button @click="submitForm">提交问卷</button>
</template>

<script>
import Question1 from '...path...';
import Question2 from '...path...';
export default{
  components: { Question1, Question2 },
  data() {
    return {
      formData: {
        answer1: '',
        answer2: ''
      }
    }
  },
  methods: {
    submitForm() {
      // 直接使用this.formData做提交、校验逻辑即可
      console.log(this.formData)
    }
  }
};
</script>

所有问题子组件可以复用完全一致的逻辑：接收value prop，输入时触发update:value事件，代码冗余度会低很多，后续加新问题也不用重复写传值逻辑。

3. 跨层级状态共享（适合复杂嵌套表单） #

如果表单组件嵌套层级很深，一层层传props、绑事件太繁琐，可以用Vue自带的provide/inject能力把父组件的表单状态直接下发给所有后代组件，子组件拿到状态后直接绑定输入即可，不需要单独写事件传值。
父组件核心代码：

export default {
  data() {
    return {
      formData: {
        answer1: '',
        answer2: ''
      }
    }
  },
  // 下发响应式表单状态
  provide() {
    return {
      formData: this.formData
    }
  }
}

任意层级的问题子组件都可以直接注入状态绑定：

<template>
  <input type="text" v-model="formData.answer1"/>
</template>
<script>
export default {
  inject: ['formData']
}
</script>

注意：使用这个方案时要传响应式对象，不要把基础类型的答案值单独下发，否则无法实现数据同步。

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