浅谈vue父子组件怎么传值
更新时间：2018年07月21日 09:12:52 作者：yali
这篇文章主要介绍了浅谈vue父子组件怎么传值,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
背景：最近在做vue的项目，因为页面的逻辑比较复杂，代码量较多，所以就想抽离出一些组件放到component里面。问题就随之来了。
因为vue不提倡在子组件中修改父组件的值，所以如果要这样操作的话就要麻烦一步，而我正好需要这样的操作，于是就查阅了资料
上父组件的代码，引用了exp-group子组件
<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>
grpVisible 和 grpData 是传给子组件的属性，一个是普通类型，一个是对象
grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},
接下来我要在子组件中改变这两个属性的值传给父组件，先要在子组件中定义一下
props: {
grpVisible: {
type: Boolean,
default: false
},
grpData: {
type: Object
}
},
首先普通类型的 grpVisible 属性如果要修改，需要定义一个变量将 grpVisible 值复制给这个变量，然后再修改这个变量，传递给父组件，具体见代码
let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件
父组件通过acceptData的参数value接收这个值
acceptData (value) {
console.log(value)
}, //父组件
如果是对象的话，就需要用Object.assign拷贝一份新的赋值给一个变量，然后修改这个变量，传递给父组件，代码如下：
let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
路由守卫又称导航守卫，指是路由跳转前、中、后过程中的一些钩子函数,这篇文章主要介绍了Vue中的路由与多种守卫,需要的朋友可以参考下2023-02-02
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
微信、支付宝支付密码时的密码输入框大家都很熟悉，本文主要介绍了vue3如何实现6位支付密码输入框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
vue导出excel和echart图形分别在不同工作表的实现方法
这篇文章主要给大家介绍了如何使用vue实现导出excel和echart图形分别在不同工作表,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue使用Post进行表单提交，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了mpvue全局引入sass文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家介绍了Vue3源码分析组件挂载初始化props与slots实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue-router 源码实现前端路由的两种方式，主要介绍Hash 路由和History 路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue组件之间进行传值的方法，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
vite2.x实现按需加载ant-design-vue@next组件的方法
这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论