Vue3 defineprops 在子组件中与 v-model 一起使用

Question

据我了解，您不能直接在子组件中更改道具值。 但我发现这会起作用，我想知道它背后的原因。

供参考：我使用的是vue3+vite

例如：

<template>
    <input v-model="price"/>
</template>

<script lang="ts" setup>

defineProps({
    price : Number
});

</script>

这可以根据输入更改道具值。 没有警告或错误

但如果我这样写

<template>
    <input v-model="props.price"/>
</template>

<script lang="ts" setup>

const props = defineProps({
    price : Number
});

</script>

控制台中会出现警告。

注意我没有写任何计算来处理道具的变化。

这是一个不好的做法吗？

Answer 1

两者都应该发出警告。 原因是父母通常不会意识到变化，除非它在那里发生了突变。 它还允许父级验证更改。 这个想法是只有数据的所有者才能修改它。

所以改为发出一个事件。 编写代码的常规方法是。

 <input :value="price" @input='$emit("input", $event)'/>
// or
 <input :value="price" @update:value='$emit("update:value", $event)'/>
// or
 <input :value="price" @input='$emit("update:value", $event)'/>

您可以同时访问这两者，因为 Vue 会自动将 props 对象本身和所有 props 的属性都公开到模板中。