如何使用 this.$emit 将值从子级传递给父级答案

【问题标题】：how do I pass the value from child to parent with this.$emit如何使用 this.$emit 将值从子级传递给父级
【发布时间】：2020-06-21 14:00:11
【问题描述】：

我在这里尝试实现的是在需要传递给父组件 [src/App.vue] 的子组件 [src/components/VueForm/FormQuestion.vue] 中传递 const randomNumber。因此我使用 $emit 来传递日期，但由于这是我第一次使用 $emit，我不太确定该怎么做。有人可以帮我解决这个问题。

为了运行这个应用程序，我将添加一个工作代码 sn-p。单击开始按钮并填写输入字段。当输入字段正确验证时，它将弹出按钮，如果用户单击该按钮，则应将数据传递给父级。最后，它应该存储在 localStorage 的 App.vue 中，因此我想从该子组件接收 randomNumber。

working code snippet here

// child component 
<template>
  <div class="vue-form__question">
    <span class="question" :class="{ big: !shouldShowNumber }"> {{ getRandomNumber() }} </span>
  </div>
</template>

<script>

export default {
  methods: {
    getRandomNumber() {
      const randomNumber = Math.floor((Math.random() * 3) + 1);
      const question = this.question.question;
      this.$emit('get-random-number', question[randomNumber]);
      return question[randomNumber];
    }
  }
};

// parent component
<template>
  <div id="app">
    <vue-form 
      :data="formData"
      @complete="complete"
      @getRandomNumber="newRandomNumber"
    ></vue-form>
  </div>
</template>

<script>
import VueForm from "@/components/VueForm";
import data from "@/data/demo";

export default {
  data() {
    return {
      formData: data
    }
  },
  components: {
    VueForm
  },
  created() {
    this.complete()
  },
  methods: {
    complete(data) {
      // Send to database here 
      // localStorage.setItem('questions', data.map(d => d.question[this.randomNumber] + ': ' + d.answer));
    },
  }
};
</script>

【问题讨论】：

标签： vue.js

【解决方案1】：

v-on:get-random-number（或高级简写语法：@get-random-number）。就像您收听任何其他事件一样，例如 @click 或 @mouseenter。

虽然我不知道破折号在事件名称中是否有效。可能不得不用驼峰包装。

【讨论】：