Vue3在子组件中使用v-model的defineprops

Question

据我所知，你不能在子组件中直接更改props值。但是当我发现这是可行的，我想知道背后的原因。

参考:我使用的是ve3 +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属性都暴露在模板中。