浅谈vue父子组件怎么传值


Posted in Javascript onJuly 21, 2018

背景:最近在做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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
通过webpack引入第三方库的方法
Jul 20 #Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 #Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 #Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 #Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 #Javascript
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
You might like
网友原创的PHP模板类代码
2008/09/07 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
canvas绘制多边形
2017/02/24 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
LayUI表格批量删除方法
2018/08/15 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python异步任务队列示例
2014/04/01 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python简单贪吃蛇开发
2019/01/28 Python
python按比例随机切分数据的实现
2019/07/11 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
公积金单位接收函
2014/01/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
人民的好儿女观后感
2015/06/18 职场文书
班级管理经验交流材料
2015/11/02 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库