vue子组件修改父组件属性（vue3子组件如何修改父组件传过来的props数据）

时间2025-09-17 11:04:38分类IT科技浏览11951

导读：前言最近新项目用vue3搭建的，准备开始使用vue3的语法，从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法，以便于以后复习，也可能帮助到一些小伙伴。...

前言

最近新项目用vue3搭建的，准备开始使用vue3的语法，从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法，以便于以后复习，也可能帮助到一些小伙伴。

1. 修改父组件普通数据

使用v-mode语法，代替了vue2.x的.sync修饰符

父组件用ref() 定义一个普通数据为响应式变量，例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上

其实它是以下的简写：

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大佬指教！

到此这篇关于vue3子组件如何修改父组件传过来的props数据的文章就介绍到这了,更多相关vue3修改父组件传的props数据内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。