详解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实时显示北京时间的方法
Mar 12 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Javascript缓存API
Jun 14 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Js面试算法详解
Apr 08 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
JavaScript自定义超时API代码实例
Apr 30 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
Zerg基本策略
2020/03/14 星际争霸
浅析is_writable的php实现
2013/06/18 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery中Dom的基本操作小结
2014/01/23 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python中的编码知识整理汇总
2016/01/26 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
高校优秀辅导员事迹材料
2014/05/07 职场文书
十岁生日答谢词
2015/01/05 职场文书
个人委托函范文
2015/01/29 职场文书
国博复兴之路观后感
2015/06/02 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js