小编Seb*_*eur的帖子

我目前正在尝试传递一个引用来获取提交时的输入（基本输入组件）的值。您将在下面找到这两个组件。对于handleSubmit 中的console.log，电子邮件始终是未定义的。

在此先感谢您的帮助。

父组件

<template>
  <form @submit.prevent="handleSubmit">
    <div class="flex flex-col mt-10">
      <form-label forInput="email" label="Email Address" />
      <base-input type="email" name="email" ref="email" />
    </div>
  </form>
</template>

<script>

import BaseInput from "../UI/BaseInput.vue";
export default {
  components: {
    BaseInput,
  },
  methods: {
    handleSubmit() {
      const email = this.$refs.email.value;
      console.log(email);
    },
  },
};
</script>

子输入组件

<template>
  <input
    :type="type"
    :name="name"
    :ref="name"
  />
</template>

<script>
export default {
  props: ["type", "name"],
};
</script>