vue.js中怎么利用props传递参数,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联是一家专注于成都网站设计、做网站与策划设计,辽宁网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:辽宁等地区。辽宁做网站价格咨询:18982081108
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数据依然是初始化时的空数组。(黑人问号???)
。
2.赋值与绑定
首先需要定位数据是在哪个地方出了问题,于是我做了一个demo来定位问题。
首先看父组件与子组件中各元素的初始值:
然后当只改变父组件中数组的引用时可以看到子组件的props数组随之改变,而子组件中绑定的数组确并没有随之改变
因此,可以发现,问题是出在了这一步
props: ['tableData', 'pageInfo'], data() { return { tData: this.tableData, page: this.pageInfo } }
而要弄清楚问题的根源,就得弄清楚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是通过如下方式联系在一起的:
tData: this.tableData
查询Vue源码可知this.tableData与tData之间仅仅是赋值,即"="关系
而上述的initData函数是在组件构建时候执行的,因此只会在create时执行一次。这也是为什么官方文档中"作为初始值传入"这一说法,因为他本就只会执行一次。当组件构建完成后,this.tableData与tData就没有半毛钱关系了,其中一个的变化并不会引起另一个变化。当然,这种说法并不准确,因为在上文中,我们动态改变父组件传入的total,子组件也"随之"改变,感觉就像是绑定在一起了啊,这又是怎么回事呢?
3.引用类型带来的假象
当然,我们还是要从官方文档出发来解决这个问题。文档中有这样一个提示:
这里就需要理解引用类型的概念,引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另一个位置,该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示:
var a = new Object();
当操作时,需要先从栈中读取内存地址,然后再延指针找到保存在堆内存中的值再操作。
a.name = 'xz';
引用类型变量赋值,本质上赋值的是存储在栈中的指针,将指针复制到栈中未新变量分配的空间中,而这个指针副本和原指针指向存储在堆中的同一个对象;赋值操作结束后,两个变量实际上将引用同一个对象。因此,在使用时,改变其中的一个变量的值,将影响另一个变量。
var b = a;
在了解了引用类型之后,我们在来看看上文提到的动态改变传入子组件前后内存中的情况:
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传递参数
本文地址:https://www.cdcxhl.com/article48/gshhep.html
成都网站建设公司_创新互联,为您提供App开发、虚拟主机、网站制作、网站策划、静态网站、定制开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联