详解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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
可实现多表单提交的javascript函数
Aug 01 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
动态加载jquery库的方法
Feb 12 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
js+canvas实现刮刮奖功能
Sep 13 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jquery如何获取复选框的值
2013/12/12 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python的mysql数据库的更新如何实现
2017/07/31 Python
python删除服务器文件代码示例
2018/02/09 Python
PyCharm代码格式调整方法
2018/05/23 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
房屋买卖委托公证书
2014/04/08 职场文书
捐资助学倡议书
2014/04/15 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
教师暑期培训感言
2014/08/15 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
家长会欢迎词
2015/01/23 职场文书