189 8069 5689

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

今天就跟大家聊聊有关vue中的父子组件是如何进行传值的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

公司主营业务:网站设计、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出怀仁免费做网站回馈大家。

上父组件的代码,引用了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中的父子组件是如何进行传值的有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站栏目:vue中的父子组件是如何进行传值的
文章转载:http://cdxtjz.cn/article/goddpe.html

其他资讯