Vue 3 迁移在输入中发出事件

Question

我正在从 Vue 2 和 Vuetify 2 迁移到 Vue 3 和 Vuetify 3。在我的 ChildComponent 中，我发出一个

$event

，但它位于如下所示的方法内。在遵循 Vue 3 迁移文档后，我尝试从

@input

更改为

v-model

，但在控制台中仍然面临一堆错误和警告。

Vue 2 代码：

// ChildComponent.Vue
<v-text-field>
    @input="newField"
</v-text-field>

<script>
export default {
    methods: {
        newField($event) {
            this.$emit('field-change', {
                fieldName: this.field.fieldName,
                value: $event
            })
        }
    }
}
</script>

// ParentComponent.vue
<ChildComponent 
    @field-change="handleFieldChange"
/>

随着 Vue 3 迁移

// ChildComponent.vue
<v-text-field>
    v-model="newField"
</v-text-field>

<script>
export default {
    methods: {
        newField($event) {
            this.$emit('field-change', {
                fieldName: this.field.fieldName,
                value: $event
            })
        }
    }
}
</script>

我收到的警告消息：

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "function () { [native code] }", got Function

。我错过了什么？

Answer 1

根据 docs，组件上的

v-model='newField'

在 Vue 3 中扩展为

:model-value='newField' @update:model-value='newField'

。那么这个错误就很容易理解了。

所以使用道具

@update:model-value='newField'

。