首页 > web前端 > js教程 > 正文

vue父子组件之间是如何进行传值的

不言
发布: 2018-07-21 11:07:05
原创
2869 人浏览过

本篇文章给大家分享的是关于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如何利用树形控件z-tree动态添加数据

JavaScript利用DOM如何实现图片切换?

以上是vue父子组件之间是如何进行传值的的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!