vue3子组件如何修改父组件传过来的props数据
更新时间：2022年10月29日 15:35:55 作者：前端阿彬
周所周知vue的props是单向数据流,可以从父组件中改变传往子组件的props,反之则不行,下面这篇文章主要给大家介绍了关于vue3子组件如何修改父组件传过来的props数据的相关资料,需要的朋友可以参考下
前言
最近新项目用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大佬指教！
到此这篇关于vue3子组件如何修改父组件传过来的props数据的文章就介绍到这了,更多相关vue3修改父组件传的props数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了Vue keep-alive组件的使用及如何清除缓存,给大家分享清除缓存的几种方法,结合实例代码给大家讲解的非常详细,需要的朋友跟随小编一起看看吧2023-10-10
今天小编就为大家分享一篇快速解决vue-cli在ie9+中无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了avue实现自定义搜索栏及清空搜索事件的实践，主要包括对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果，具有一定的参考价值，感兴趣的可以了解一下2021-12-12
这篇文章主要为大家介绍了Vue父子组件元素获取方法互相调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了Vue字符串中如何添加多个空格问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
详解vue+axios给开发环境和生产环境配置不同的接口地址
这篇文章主要介绍了详解vue+axios给开发环境和生产环境配置不同的接口地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本篇文章主要介绍了karma+webpack搭建vue单元测试环境的方法示例，这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要给大家介绍了关于前端Vue项目国际化解决方案的实战记录,以上只是一部分Vue项目开发中遇到的典型问题和解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。2016-11-11
下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论