VUE3 子组件修改props数据，Unexpected mutation of “xxx“ prop解决方法

        最近网上找了一个vue2的开源项目，想移植到自己的项目中(vue3)，它里面有需要修改props，但是在vue3中直接使用就会报错Unexpected mutation of "xxx" prop。网上找了半天也没一篇文章能够正确解决。自己只能根据他们的方法，一点一点试，居然还让我试出来了( ╯□╰ )

本文是基于setup语法糖的。直接上代码，毕竟原理我也讲不出来。

父组件

<!-- 向子组件传递数据的时候，加上v-model，方便接收回传数据 -->
<children v-mode:data="state.data" />
<!--这里这个是用来显示效果的 -->
<el-input v-model="state.data />

子组件

(15条消息) Vue3中修改父组件传递到子组件中的值(全网少有)_vue3父组件修改子组件的值_喝西瓜汁的兔叽Yan的博客-CSDN博客

这篇文章虽然写了如果传递给父组件修改后的值，但是没有写如何绑定，如何动态修改数据。

如果直接使用v-model="props.data"绑定，会报错

使用toRef或者toRefs转换一下后 ，不会报错了

<el-input v-model="data" />
<script lang="ts" setup >
const props = defineProps({
	data: {
		type:String,
		default:''}
});
const {data}=toRefs(props)
const emits = defineEmits(['update:data']);
watch(()=>data,(val)=>{
	emits('update:data',val)
})
</script>

但是在修改时，会报’只读‘警告

 经过测试，必须将data再赋值给一个中间变量来处理

<!--赋值也是给state.data -->
<el-input v-model="state.data" />
<script lang="ts" setup >
const props = defineProps({
	data: {
		type:String,
		default:''}
});
const {data}=toRefs(props)
<!--定义一个中间变量 -->
const state = reactive({
	data:''
});
<!--我这里是打开子组件的弹出框时，处理数据-->
const open=()=>{
    state.data=data
}
const emits = defineEmits(['update:data']);
<!--监听state.data-->
watch(()=>state.data,(val)=>{
	emits('update:data',val)
})
</script>

现在修改子组件的数据，父组件就能同步修改了。