如何使用 Vue 将 ref 传递给子输入组件？

Question

我目前正在尝试传递一个引用来获取提交时的输入（基本输入组件）的值。您将在下面找到这两个组件。对于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>

Answer 1

如果您想访问父组件中子组件输入字段的值，则需要一种使数据从子组件流向父组件的方法，这是通过发出来完成的。

但是能够将 v-model 与自定义 BaseInput 组件一起使用不是很好吗？使用表单输入绑定的方式相同吗？

<input
  :value="text"
  @input="event => text = event.target.value">

或 v 模型来简化

<input v-model="text">

像这样的东西

<BaseInput v-model="email" />

嗯，我们可以做到这一点。您需要的是modelValue道具和update:modelValue发出事件。

您可以将两者包装在可写的计算属性中，以获得更清晰的语法。

const props = defineProps({
    modelValue: {
        type: String,
    },
});

const emit = defineEmits(['update:modelValue']);

const internalValue = computed({
    get() {
        return props.modelValue;
    },
    set(value: string) {
        return emit('update:modelValue', value);
    },
});

当internalValue设置为新值时，它会将该事件发送到父组件并通过props.modelValue进行同步。这意味着，您可以更改父组件中的 props.modelValue，并且更改将反映在您的自定义组件中。反之亦然。

我喜欢这种方法，因为它为您提供了一种非常自然的方式来推理您的组件。现在，这个概念并不局限于 v-model 本身，您可以将它与任何想要同步到父组件的 prop 一起使用。只需使用name属性，update:name在子组件中发出，并在父组件中使用v-model:name。

资源：

• https://vuejs.org/guide/components/events.html#usage-with-v-model