Vue2.0系列——vue封装swiper轮播组件--

1、父组件传递给子组件数据；

2、子组件通过props接收数据；

3、v:bind以及v-for的使用；

4、实现了轮播组件。

前一篇我们搭建了一个vue2+webpack2的框架，实现了一个全局导航组件。

今天说说在vue中使用轮播组件的选择（会造轮子的自己写轮播特效）。

父组件如何传递数据给子组件？
官网有这么一段内容来介绍。


简单来说就是通过props实现父组件的数据流向子组件。 
Prop
    使用 Prop 传递数据
    camelCase vs. kebab-case
    动态 Prop
    字面量语法 vs 动态语法
    单向数据流
    Prop 验证

简单来说就是通过props实现父组件的数据流向子组件。

为什么叫做单向数据流呢？
数据在父组件中可以修改，比如通过http请求动态更新数据，而子组件只负责通过props接收数据，子组件的权限是只读（如果我没理解错的话，那么跟react中是一样的。）

在本例子中，我实现了这样一个父组件Home.vue

第一步：定义我们的数据结构data，data是一个方法，该方法返回一个object或者类数组等各种数据模型。我定义的是listImg的数组结构。每个数组元素对应一个图片路径，图片都保存在根目录下面的static文件夹。你可能想到使用require导入图片，使用import也是类似的，至于直接传入路径，不使用import或者require会有什么后果，可以自己测试。

第二步：在template中使用v-bind绑定listImg的数据到一个和他同名的:listImg的属性上，这个属性名可以在符合vue规范的情况下任意定义，:listImg === v-bind:listImg。在这里我还要说一个特别的情况。如果你这样写:listImg="{listImg}",子组件接收到的就是一个object，相当于改变了原来的数组类型变成了对象。

子组件通过props接收数据并绑定到DOM
我新建了一个子组件叫做Banner.vue，这个子组件自然就是指轮播图组件swiper（感兴趣的可以去官网看看）。

第一步：安装swiper。

npm install --save swiper

第二步：写template。

轮播图是一个列表，所以这里使用到了v-for来遍历，轮播的部分是swiper-slide元素。我把图片路径绑定到了style属性上面。请注意绑定语法的缩写是:（冒号），style内部是一个object，所以background-image要写成backgroundImage，而图片地址url采用字符串拼接的方式来做。

第三步：编写Banner.vue的JavaScript代码。

根据swiper的官方教程，我们需要实例化swiper。
1、导入swiper；
2、导入swiper的css；
3、通过props获取父组件传递过来的属性listImg；
4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。

**

第四步：写css样式。

**
===================================== 分割线 =============================================
最后，到这一步已经完成了一个轮播图组件了。swiper还是挺好用的。贴上完整的Banner.vue代码，一字不差。

总结：vue的轮播实现并不难，整体过程和react中很相似，途中我也遇到一个小bug，图片路径一直报错，最后我发现图片后缀不对，第一张是banner1.png，后面4张都是bannerx.jpg，图片都是从酷狗下载的，一下子没注意，被这个坑了一下。
运行效果：