×

Vue3小应用:利用子组件修改父组件传过来的props数据

作者:andy0012023.01.09来源:Web前端之家浏览:277评论:0
关键词:vue3

Vue3小应用:利用子组件修改父组件传过来的props数据。

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

修改父组件普通数据

使用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')
    }
  }

Web176教程网相关vue3文档

修改父组件复杂数据(对象)

在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')
    }
  }

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vue320220109a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2