Vue父子组件实现数据传递

 

前提

 

上一篇博客我们介绍了如何通过axios获取数据，上一篇没看的朋友可以点击一看

https://blog.csdn.net/Delicious_Life/article/details/103980337

 

 

json数组传递演示

 

下面我通过传递json数组来演示父子组件是如何传递数据的。

 

首先我们先在父页面js中定义一个data，这里面存储了这个页面的各种数据。以weekendList为例，默认给它一个空数组

 

然后我们在父页面标签中绑定一个属性

 

再之后，打开子页面，例如home-weekend。在js中添加一个props对象，props里面定义一个数组list

 

再打开父页面，在methods中定义一个getHomeInfoSucc(res)方法，这里面判断是否接受到了正确的后端数据。接收到之后你要在后面写清用什么去接受什么。例如用weekendList对象接受data中的weekendList

 

最后一步，在子组件中，之前我们用写死的数据进行的v-for循环，遍历的对象要改成我们获取后端数据的list

 

效果展示