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`对象转换为响应式引用。在返回的对象中，每个属性都是一个响应式引用，可以直接修改其值。