iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3子组件如何修改父组件传过来的props数据
  • 698
分享到

vue3子组件如何修改父组件传过来的props数据

摘要

目录前言1. 修改父组件普通数据2. 修改父组件复杂数据(对象)最后前言 最近新项目用vue3搭建的,准备开始使用Vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使

前言

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

1. 修改父组件普通数据

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

  1. 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’)
  2. 父组件用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')
    }
  }

相关vue3文档

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数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue3子组件如何修改父组件传过来的props数据

本文链接: https://www.lsjlt.com/news/170402.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作