最近网上找了一个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>
现在修改子组件的数据,父组件就能同步修改了。