vue3子组件如何修改父组件传过来的props数据
前端阿彬 人气:0前言
最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴。
1. 修改父组件普通数据
使用v-mode语法,代替了vue2.x的.sync修饰符
- 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’)
- 父组件用v-mode将数据绑定到子组件上
<ChildComponent v-model:test="test" />
其实它是以下的简写:
<ChildComponent :test="test" @update:test="test = $event" />
3.子组件
子组件使用emit修改父组件数据
//ChildComponent props: { test:String //接收父组件数据 }, emits: ['update:test'], //定义组件可触发的事件 setup(props,ctx){ function onClick() { ctx.emit('update:test','child') } }
2. 修改父组件复杂数据(对象)
在vue2.x中,子组件虽然不能修改父组件传过来的普通数据,但是可以直接操作复杂数据,但是vue3不行。目前我只能用类似vue2的语法来解决修改父组件对象数据的问题,如有哪位大佬有更好的办法,还希望评论区指教!!!
父组件reactive定义一个对象为响应式数据,并绑定到子组件上,例如
<ChildComponent :obj="obj" @update:obj="updateObj" /> const obj = reactive({ key: 'test' })
父组件定义一个修改数据的方法
function updateObj(params){ obj.key = params } return{ updateObj }
子组件emit定义一个可触发的事件
//ChildComponent props: { obj:Object //接收父组件数据 }, emits: ['update:obj'], //定义组件可触发的事件 setup(props,ctx){ function onClick() { ctx.emit('update:obj','child') } }
最后
我试过用第一种修改普通数据的方式修改父组件对象,但是发现没有效果,好像是reactive定义的响应式数据,用v-model绑定后就被覆盖成普通对象了,不知道是不是,望vue3大佬指教!
加载全部内容