swiper vue 切换到指定_封装一个自己的轮播图组件（基于 Vue）

创建目录结构

vue-swiper/
├── src/
│   ├── components/ //内置组件
│   │   ├── indicator.vue  // 指示器组件
│   │   └── item.vue  // 单个轮播图容器组件
│   ├── main.js  // 项目出口
│   └── main.vue  //组件出口
├── README.md  
├── package.json
└── vue.config.js  // 组件打包配置文件

项目结构解析

我们知道一个轮播图是由其容器和内容构成的，这里首先把整个轮播图组件拆分为入口组件和其要用到的子组件（指示器组件可以根据自己的项目维护方式自由拆分，这里把它单独拆出来便于以后维护）。以往我们在使用第三方组件的时候可能会看到其组件就是单独的一个入口，所有的属性传入和事件监听都是放在了一个大的组件上了，其实这种封装的方式后期是不好维护的，而且在使用的时候也是不容易发现出现的问题，为了能让组件自身更具有语义化以及开发当中便于调试和后期组件的维护，我们把容器和内容分离开拆成两个组件，这样用户在模板中书写组件时候就能像使用普通的 HTML 标签一样嵌套使用了。

前提

以往我们开发一个页面中的轮播图可能会牵扯到大量手动的 DOM 样式操作，这里带来的问题就是我们关心的视图变化和逻辑操作混到了一起，关注点没有分离开，无论从维护还是代码的可读性这种方式都不是最优的。现在我们是基于 Vue 开发的这个组件，这样就可以利用它最核心的思想（数据驱动视图改变）开完成这个组件的开发。

数据驱动动画

有了数据驱动的这个主要思想，我们就可以围绕它展开组件开发了。首先把轮播图播放动画当中能用到的状态变量