先简单的介绍下业务，项目是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
网友评论