本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法，以下是全部内容。
前段时间用vue做一个后台管理系统，其中每一页都需要一个表格来展示信息。自然就想到了将表格提取出来做成公共组件，将不同页面的数据传入进行渲染，达到复用的目的。
demo地址
1. 问题发现
在父组件中，需要向表格组件传递的数据有表格的内容数据tableData，表格的页面数据page。
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法，以下是全部内容。
前段时间用vue做一个后台管理系统，其中每一页都需要一个表格来展示信息。自然就想到了将表格提取出来做成公共组件，将不同页面的数据传入进行渲染，达到复用的目的。
demo地址
在父组件中，需要向表格组件传递的数据有表格的内容数据tableData，表格的页面数据page。
其中tableData是个Array对象，是所有需要在表格中展示的数据对象组成的一个数组。而pageInfo是个Object对象，包含了表格页面信息。在父组件对两个数据对如下初始化，形式如下
按照官方文档上的说明，prop是单向绑定的，不应该在子组件内部改变prop。之所以有想修改prop中数据的冲动，主要是prop作为初始值传入后，子组件想把它当作局部数据来用。对于这种情况，官方的说法是定义一个局部变量，并用 prop 的值初始化它：
然后根据官方文档的说法，当每次父组件更新时，子组件的所有prop都会更新为最新值。而tableData和pageInfo的信息是异步通过api从server端获取的：
因此当获取到数据时父组件需要改变传入子组件中的值：
按理说这时候子组件中的值应该更新成server返回的值，但是子组件页面的总数更新了，但table数据依然是初始化时的空数组。（黑人问号？？？）
首先需要定位数据是在哪个地方出了问题，于是我做了一个demo来定位问题。
首先看父组件与子组件中各元素的初始值：
然后当只改变父组件中数组的引用时可以看到子组件的props数组随之改变，而子组件中绑定的数组确并没有随之改变
因此，可以发现，问题是出在了这一步
而要弄清楚问题的根源，就得弄清楚vue文档中深入响应式原理。
"在Vue实例的data选项中，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter"，"每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。"文档中说了这么一大堆，简单理解就是Vue将data选项中的vm.$data.a与DOM中的vm.a进行了双向绑定，即其中一个变化，另一个也会跟着变化。在Vue源码中是由defineReactive$$1函数实现的：
但在子其中主要是利用了Object.defineProperty的get和set方法实现了双向绑定。而在子组件中，pros数据和子组件的$data是通过如下方式联系在一起的：
查询Vue源码可知this.tableData与tData之间仅仅是赋值，即"="关系
而上述的initData函数是在组件构建时候执行的，因此只会在create时执行一次。这也是为什么官方文档中"作为初始值传入"这一说法，因为他本就只会执行一次。当组件构建完成后，this.tableData与tData就没有半毛钱关系了，其中一个的变化并不会引起另一个变化。当然，这种说法并不准确，因为在上文中，我们动态改变父组件传入的total,子组件也"随之"改变，感觉就像是绑定在一起了啊，这又是怎么回事呢？
当然，我们还是要从官方文档出发来解决这个问题。文档中有这样一个提示：
这里就需要理解引用类型的概念，引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示：
当操作时，需要先从栈中读取内存地址，然后再延指针找到保存在堆内存中的值再操作。
首先对tableData的改变是改变了其引用的指针，而对pageInfo则改变了其中一个属性的值，因此动态改变前：
动态改变后：
这样就解释了为什么子组件页面的总数更新了，但table数据依然是初始化时的空数组。因为引用类型的存在，我们动态改变父组件传入的total,子组件也"随之"改变了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。