Vue.js - 使用发射但没有按钮将数据从子组件传递到父组件

Question

我有一个父表单模板，表单的每个问题都在一个子组件中，就像这样

   <template>
      <question1
         @display-answer-1="setAnswer1"
      />
      <!-- other child components here... -->
   </template>
   
   <script>
   
   import Question1 from '...path...';
   
   export default{

      components: { Question1 },
      data() {
         answer1: ''
      },
      methods: {
         setAnswer1(answer1) {
             this.answer1 = answer1;
         }
      }
   };

我的子组件是这样的

<template>
   <input type="text" v-model="answer1"/>
   <div>
       <button
             type="button"
             @click="saveQ2"
       >Save
       </button>
   </div>
</template>

<script>

export default {
    data() {
        return {
            answer1: ''
        };
    },
    methods: {
        saveQ2() {
            const answer1 = this.answer1;
            this.$emit('display-answer-1', answer1);
        }
    }
};

这段代码有效，但这样我就不得不在有问题时放置一个按钮，将数据从子级传递给表单模板父级。 是否有一个聪明的选择，不在每个问题下放置一个save按钮？

Answer 1

只要输入不聚焦，您就可以使用blur 事件，它会触发事件。

<template>
<input @blur="saveQ2" type="text" v-model="answer1"/>
</template>

<script>

export default {
data() {
    return {
        answer1: ''
    };
},
methods: {
    saveQ2() {
        const answer1 = this.answer1;
        this.$emit('display-answer-1', answer1);
    }
}

};