vue3 组合式 修改props的值

在Vue 3中，可以使用组合式API来修改props的值。组合式API是Vue 3中引入的一种新的API风格，它提供了更灵活和可组合的方式来编写组件逻辑。
要修改props的值，可以使用toRef和toRefs函数来创建一个响应式引用。toRef函数可以将一个普通的JavaScript对象的属性转换为一个响应式引用，而toRefs函数可以将整个对象的所有属性都转换为响应式引用。
下面是一个示例代码，展示了如何使用组合式API修改props的值：
import { toRef, toRefs } from 'vue';

export default {
props: {
message: {
type: String,
default: 'Hello World'
}
},
setup(props) {
// 使用toRef创建一个响应式引用
const messageRef = toRef(props, 'message');

// 修改props的值
messageRef.value = 'Modified Message';

// 使用toRefs创建所有props的响应式引用
const propsRef = toRefs(props);

return {
messageRef,
...propsRef
};
}
};
登录后复制
在上面的示例中，我们首先使用toRef函数创建了一个名为messageRef的响应式引用，它引用了props对象中的message属性。然后，我们可以直接通过修改messageRef.value来修改props.message的值。
如果你想同时修改多个props的值，可以使用toRefs函数将整个props对象转换为响应式引用。在返回的对象中，每个属性都是一个响应式引用，可以直接修改其值。