Vue 3 v-model 无法与 Nuxt.js 中的自定义输入组件一起使用

Question

我正在尝试将自定义 Vue 输入组件与 v-model 一起使用，但该值没有在父组件中更新。我正在使用 Vue 3 和 Nuxt.js。

这是我的自定义输入组件：

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    :placeholder="placeholder"
    class="border border-gray-300 rounded-lg w-full p-2 text-black m-1"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  placeholder: String,
});

const emit = defineEmits(["update:modelValue"]);
</script>

<script>
export default {
  name: "MyInput",
};
</script>

这是我在父组件中使用它的方式：

<template>
  <div>
    <MyInput v-model="inputValue" placeholder="Enter a value" />
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  name: "MyParentComponent",
  components: {
    MyInput,
  },
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

当我在输入字段中键入内容时，inputValue 数据属性不会更新。有人可以帮我找出我做错了什么吗？

我有一个没有 Nuxt.js 的 Vue 3 项目，使用完全相同的代码，并且它可以在那里工作。

Answer 1

老兄，正在工作！您可以查看这里。 尽管我们没有明确定义 modelValue 的发射。