vue3修改props的值

在Vue 3中，直接修改props的值是不被允许的，这是因为Vue 3采用了Composition API，它遵循了单向数据流的原则。如果你想修改props的值，可以使用toRef或者toRefs来转换一下props，这样就可以避免报错。\[2\]

例如，在你的代码中，你可以使用toRefs来转换props中的data属性，然后在watch中监听转换后的data值的变化，并通过emit方法将新的值传递给父组件。这样就可以实现修改props的值而不会报错。具体代码如下：

const { data } = toRefs(props);

watch(() => data, (val) => {
  emits('update:data', val);
});

这样，当data的值发生变化时，会触发watch的回调函数，然后通过emit方法将新的值传递给父组件。这样就可以实现修改props的值了。\[2\]

另外，还有一种可能的正确做法是在子组件中使用一个新的变量来绑定props的值，防止直接修改props。然后通过watch监听这个新的变量的变化，并在变化时通过emit方法将新的值传递给父组件。具体代码如下：

data() {
  return {
    input: this.modelValue, // 绑定到 data 的变量，防止直接修改 Props
  };
},
beforeMount() {
  this.input = this.modelValue;
},
watch: {
  input(newInput, oldInput) {
    this.$emit("update:modelValue", newInput); // 监听 input 在修改时发起事件，由父组件修改 modelValue 的值
  },
  modelValue(newValue, oldValue) {
    this.input = newValue;
  },
}

这样，当input的值发生变化时，会触发watch的回调函数，然后通过emit方法将新的值传递给父组件。这样就可以实现修改props的值了。\[3\]

希望以上解答对你有帮助！
#### 引用[.reference_title]
- *1* *2* [VUE3 子组件修改props数据，Unexpected mutation of “xxx“ prop解决方法](https://blog.csdn.net/lzh6hao0/article/details/130218784)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v12^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue 子组件直接修改 props 中的属性值（单向数据流）](https://blog.csdn.net/GapCold/article/details/123223567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v12^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]