VUE项目--Floor组件

开发Floor组件

Floor组件它被复用的

1. Floor组件获取mock数据，发请求的action书写在哪里?

派发action应该是在父组件的组件中的mounted（挂载完毕生命周期函数）中书写，
因为父组件需要通知Vuex发请求，父组件获取到mock数据，通过v-for 遍历生成多个floor组件，因此达到复用作用。

在父组件（home文件夹下的index.vue）中：

   //Floor组件内部没有发请求，数据是父组件传递过来的 <Floor v-for="(floor, index) in floorList" :key="floor.id" :list="floor" />

  mounted() {this.$store.dispatch("getFloorList");},computed: {...mapState({ floorList: (state) => state.home.floorList }),},

2. Floor组件如何获取数据？？

通过props传递

在Floor组件中：

<liclass="active"v-for="(item, index) in list.navList":key="index"><a href="#tab1" data-toggle="tab">{{ item.text }}</a>
</li>

export default {name: "Floor",props: ["list"],......
}

组件间通信有：

props:父子
插槽:父子
自定义事件:子父
全局事件总线$bus:万能
pubsub:万能
Vuex:万能
$ref:父子通信

3. 轮播图实现
与之前写的大轮播图类似，但是可以写在mounted里面，为什么？

第一次写轮播图：不能在mounted中，是因为ListContainer组件内部存在向后台发请求，动态渲染结构
第二次：父组件发起请求后，向子组件传递数据；数据存在，结构完整；v-for在遍历来自于服务器的数据，如果服务器的数据有了，Floor结构一定的完整的。否则都看不见Floor组件

  mounted() {var mySwiper = new Swiper(this.$refs.mySwiper, {loop: true, // 循环模式选项// 如果需要分页器pagination: {el: ".swiper-pagination",},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},}); },

VUE项目--Floor组件相关推荐

vue项目购物车组件、清空购物车
1.购物车组件 <template><div><div class="shopcart"><div class="content ...
vue项目中组件和solt使用
最近遇到了难题,是一个关于产品的优化问题. 折叠展开文字是不是听起来很简单的样子,可是就是有一个表格的问题把我给难住了,想了好久也没有想明白,最终还是我们的老大救援,做出来了.佩服呀!!!! 今天就这 ...
vue项目创建组件的步骤展示
在home界面文件中提取出相关的子组件如typeNav子组件如果这个typeNav是全局多个界面用到了就放入components文件夹中当作全局公共组件如果只有home界面用到了就放在pag ...
Vue学习--Vue项目根目录介绍(1)
文章目录前言一.build文件夹--webpack 配置目录二.mock文件夹--生成随机数据,拦截ajax请求三.node_modules--npm 加载的项目依赖模块四.public文件 ...
[适合前端新手vue项目]超级可爱的宠物APP
[适合前端新手项目]超级可爱的宠物APP > < 基于网上找的UI设计图,实现简单的移动端静态页面:利用VUE框架进行管理:Mock实现模拟数据:添加了token登录和注册功能本项目用到 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
iconfont 在vue项目中的应用（icon-component组件）
前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之s ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

VUE项目--Floor组件

开发Floor组件

VUE项目--Floor组件相关推荐

最新文章

热门文章