计算属性在子父组件中的使用

时间:2021-6-3 作者:qvyue

先简单的介绍下业务,项目是SPA应用,列表数据打开详情时,在详情页中的子组件需要得到父组件中的动态数据(请求返回的数据),然后在子组件中展示,那么,如果使用this.$parent.data的方式,只能获取到父组件中定义的静态数据。如何获取到父组件中请求到的动态数据呢?先看下官网对计算属性的定义:

计算属性在子父组件中的使用
Paste_Image.png

计算属性实时追踪它的相应依赖,依赖关系值发生变化,对应的计算属性值也会发生变化。

看下项目中的错误的例子:
父组件:

计算属性在子父组件中的使用
Paste_Image.png

定义了一个info数据对象,里面初始的name值为11,在响应当前界面时,通过route去修改info对象的值。
子组件:

计算属性在子父组件中的使用
Paste_Image.png

当父组件响应时,我们已经通过route去修改了info数据对象的值,但是如果通过这种方式子组件调用父组件的数据,只会得到父组件初始化定义的静态值。
子组件添加计算属性:

计算属性在子父组件中的使用
Paste_Image.png

通过计算属性的方式,子组件会监听父组件中name的值,一旦父组件中info数据对象的name值发生变化,子组件也能快速的得到相应后的值。
vue官网不建议在组件中直接引用父组件的数据,建议还是直接使用props的方式向子组件传递数据,好吧,如果觉得抽象不好理解,那么看下效果图吧。

计算属性在子父组件中的使用
22.gif
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。