Vue项目中常见问题(22)获取floor组件mock数据

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

1.获取floor数据

2.三连环

 问题来了:getFloorList这个action在哪里触发?

 3.让floor的父组件home拿到数据

4.遍历

组件通信的方式有哪些?(面试频率极高)

props:用于父子组件通信

自定义事件:@on @emit 可以实现子给父通信

全局事件总线:$bus 全能

pubsub-js: vue当中几乎不用 全能

插槽

vuex

---

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

1.获取floor数据

在api/index.js中

//获取floor数据
export const reqFloorList = ()=>mockRequests.get('/floor')

2.三连环

在store/Home/index.js中:

 

 问题来了:getFloorList这个action在哪里触发?

发请求不能在Floor内部去发,因为在这内部发没办法遍历出两个Floor组件,这要比前面的文章中我写的要特殊一点

应该在pages/Home/index.vue 里面路由组件去派发

 这样楼上三张图结合起来就形成了三连环

此时查看控制台会发现floor中已经有数据了

 3.让floor的父组件home拿到数据

在pages/Home/index.vue 里

 

 控制台看看,会发现Home中已经有floorList的数据了

4.遍历

在<Floor/>自定义标签的身上遍历

在pages/Home/index.vue 里

id从数据中查看

现在去页面可以看到两个floor

 

 5.

分析数据现在是在Home身上的,home和floor是父子关系,所以就用到父子组件通信

组件通信的方式有哪些?(面试频率极高)

props:用于父子组件通信

自定义事件:@on @emit 可以实现子给父通信

全局事件总线:$bus 全能

pubsub-js: vue当中几乎不用 全能

插槽

vuex

在pages/Home/index.vue 里传数据给子组件

 在pages/Home/Floor/index.vue也就是子组件中接收数据

 再去控制台查看:可以看到Floor组件通过props得到了list这个数据