详解vue.js之props传递参数


Posted in Javascript onDecember 12, 2017

本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容。

前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息。自然就想到了将表格提取出来做成公共组件,将不同页面的数据传入进行渲染,达到复用的目的。

demo地址

1. 问题发现

在父组件中,需要向表格组件传递的数据有表格的内容数据tableData,表格的页面数据page。

<div>
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</div>

其中tableData是个Array对象,是所有需要在表格中展示的数据对象组成的一个数组。而pageInfo是个Object对象,包含了表格页面信息。在父组件对两个数据对如下初始化,形式如下

tableData:[],
pageInfo: {
 current: 1, // 当前是第几页
 total: 100, // 数据对象的总数
 size: 20 // 每页显示的数量
}

 

按照官方文档上的说明,prop是单向绑定的,不应该在子组件内部改变prop。之所以有想修改prop中数据的冲动,主要是prop作为初始值传入后,子组件想把它当作局部数据来用。对于这种情况,官方的说法是定义一个局部变量,并用 prop 的值初始化它:

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

然后根据官方文档的说法,当每次父组件更新时,子组件的所有prop都会更新为最新值。而tableData和pageInfo的信息是异步通过api从server端获取的:

{
 error: 0,
 msg: "调用成功.",
 data: {
  restrictioninfo: [...],
  total: 42
 }
}

 

因此当获取到数据时父组件需要改变传入子组件中的值:

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;

按理说这时候子组件中的值应该更新成server返回的值,但是子组件页面的总数更新了,但table数据依然是初始化时的空数组。(黑人问号???)

详解vue.js之props传递参数

2.赋值与绑定

首先需要定位数据是在哪个地方出了问题,于是我做了一个demo来定位问题。

首先看父组件与子组件中各元素的初始值:

详解vue.js之props传递参数

然后当只改变父组件中数组的引用时可以看到子组件的props数组随之改变,而子组件中绑定的数组确并没有随之改变

详解vue.js之props传递参数

因此,可以发现,问题是出在了这一步

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

 

而要弄清楚问题的根源,就得弄清楚vue文档中深入响应式原理。

详解vue.js之props传递参数

"在Vue实例的data选项中,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/setter","每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。"文档中说了这么一大堆,简单理解就是Vue将data选项中的vm.$data.a与DOM中的vm.a进行了双向绑定,即其中一个变化,另一个也会跟着变化。在Vue源码中是由defineReactive$$1函数实现的:

详解vue.js之props传递参数

但在子其中主要是利用了Object.defineProperty的get和set方法实现了双向绑定。而在子组件中,pros数据和子组件的$data是通过如下方式联系在一起的:

tData: this.tableData

 

查询Vue源码可知this.tableData与tData之间仅仅是赋值,即"="关系

详解vue.js之props传递参数

而上述的initData函数是在组件构建时候执行的,因此只会在create时执行一次。这也是为什么官方文档中"作为初始值传入"这一说法,因为他本就只会执行一次。当组件构建完成后,this.tableData与tData就没有半毛钱关系了,其中一个的变化并不会引起另一个变化。当然,这种说法并不准确,因为在上文中,我们动态改变父组件传入的total,子组件也"随之"改变,感觉就像是绑定在一起了啊,这又是怎么回事呢?

3.引用类型带来的假象

当然,我们还是要从官方文档出发来解决这个问题。文档中有这样一个提示:

详解vue.js之props传递参数

这里就需要理解引用类型的概念,引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另一个位置,该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示:

var a = new Object();

 

详解vue.js之props传递参数

当操作时,需要先从栈中读取内存地址,然后再延指针找到保存在堆内存中的值再操作。

a.name = 'xz';

 

详解vue.js之props传递参数
引用类型变量赋值,本质上赋值的是存储在栈中的指针,将指针复制到栈中未新变量分配的空间中,而这个指针副本和原指针指向存储在堆中的同一个对象;赋值操作结束后,两个变量实际上将引用同一个对象。因此,在使用时,改变其中的一个变量的值,将影响另一个变量。

var b = a;

 

详解vue.js之props传递参数
在了解了引用类型之后,我们在来看看上文提到的动态改变传入子组件前后内存中的情况:

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;
========================================
props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

 

首先对tableData的改变是改变了其引用的指针,而对pageInfo则改变了其中一个属性的值,因此动态改变前:

详解vue.js之props传递参数

动态改变后:

详解vue.js之props传递参数

这样就解释了为什么子组件页面的总数更新了,但table数据依然是初始化时的空数组。因为引用类型的存在,我们动态改变父组件传入的total,子组件也"随之"改变了。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
document.write的几点使用心得
May 14 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
react实现菜单权限控制的方法
Dec 11 #Javascript
Angular 作用域scope的具体使用
Dec 11 #Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 #Javascript
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
浅谈React高阶组件
2018/03/28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
JS轮播图的实现方法
2020/08/24 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
pytorch打印网络结构的实例
2019/08/19 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
结对共建协议书
2014/08/20 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
小学英语课教学反思
2016/02/15 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
Python何绘制带有背景色块的折线图
2022/04/23 Python