Invalid prop: type check failed for prop “onUpdate:value“

[Vue warn]: Invalid prop: type check failed for prop “onUpdate:value”. Expected Function, got Array

在 Vue 3 中，当使用 v-model 绑定 Prop(属性)时，需要在组件中定义一个名为 update:<propName> 的事件，并且在事件处理函数中使用 emit 方法触发一个带有新值的 update:<propName> 事件，以便更新父组件中的数据。如果没有正确定义 update:<propName> 事件，就会出现 Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array 的警告。也就是使用 v-model 绑定一个没有双向绑定特性的普通属性时，就会出现该警告。

例如，假设有一个组件 MyComponent，其中有一个名为 value 的 Prop，想要使用 v-model 绑定它，可以按照以下方式进行修改：

<template>
  <div>
    <input :value="value" @input="handleChange" />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyComponent",
  props: {
    value: {
      type: String,
    },
  },
  emits: ["update:value"],
  methods: {
    handleChange(event) {
      this.$emit("update:value", event.target.value);
    },
  },
});
</script>

在这个示例中，我们在组件中定义了一个名为 update:value 的事件，并且在 emits 选项中声明了它。还定义了handleChange方法，在这个方法中使用 emit 方法触发了 update:value 事件，以便更新父组件中的数据。

通过这样的方式，我们就可以正确地使用 v-model 绑定一个 Prop(属性)，避免 Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array 的警告。