Question

我在这里想要实现的是在需要传递给父组件[src / App.vue]的子组件[src / components / VueForm / FormQuestion.vue]中传递const randomNumber。因此，我使用$ emit传递日期，但是由于这是我第一次使用$ emit进行操作，因此我不确定如何做到这一点。有人可以帮我这个忙。

为了运行该应用程序，我将添加一个工作代码段。单击开始按钮，然后填写输入字段。输入字段正确验证后，它将弹出按钮，如果用户单击该按钮，则应将数据传递给父级。最后，它应该存储在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>

Answer 1

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

尽管我不知道事件名称中的破折号是否有效。可能必须用驼峰包。

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

1 个答案: