浅谈vue父子组件怎么传值
2018-07-21 09:12
976 查看
背景:最近在做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 中父子组件传值:props和$emit
- Vue父子模版传值及组件传值的三种方法
- vue 的 $emit 的用法(父子组件传值)
- VUE之父子组件间传值
- Vue父子组件传值
- vue父子组件中传值
- 详解vue父子组件间传值(props)
- 浅谈Vue父子组件和非父子组件传值问题
- vue 父子组件传值
- 浅谈Vue2.0父子组件间事件派发机制
- Vue父子组件传值
- vue-父子组件间的相互传值与传址
- Vue父子组件相互传值
- vue基础语法以及父子组件如何相互传值
- Vue 使用Props属性实现父子组件的动态传值
- vue组件传值
- vue父子组件传参学习
- Vue2.0父子组件传递函数的教程详解
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i