学习vue的第二篇文章，完成了以下功能。
1、父组件传递给子组件数据；
2、子组件通过props接收数据；
3、v:bind以及v-for的使用；
4、实现了轮播组件。
前一篇我们搭建了一个vue2+webpack2的框架，实现了一个全局导航组件。
今天说说在vue中使用轮播组件的选择（会造轮子的自己写轮播特效）。
运行效果：vue-酷我demo
父组件如何传递数据给子组件？
官网有这么一段内容来介绍。
Prop 使用 Prop 传递数据 camelCase vs. kebab-case 动态 Prop 字面量语法 vs 动态语法 单向数据流 Prop 验证
简单来说就是通过props实现父组件的数据流向子组件。
为什么叫做单向数据流呢？
数据在父组件中可以修改，比如通过http请求动态更新数据，而子组件只负责通过props接收数据，子组件的权限是只读（如果我没理解错的话，那么跟react中是一样的。）
在本例子中，我实现了这样一个父组件Home.vue
<template>
<div>
<app-banner :listImg="listImg"></app-banner>
</div>
</template>
<script>
import Banner from './templates/Banner.vue'
import a from '../../static/img/home/banner1.png'
import b from '../../static/img/home/banner2.jpg'
import c from '../../static/img/home/banner3.jpg'
import d from '../../static/img/home/banner4.jpg'
import e from '../../static/img/home/banner5.jpg'
export default {
name: 'Home',data() {
return {
listImg: [{
url: a
},{
url: b
},{
url: c
},{
url: d
},{
url: e
}]
}
},components: {
'app-banner': Banner
}
};
</script>
第一步：定义我们的数据结构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采用字符串拼接的方式来做。
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.url + ')' }"></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
</template>
第三步：编写Banner.vue的JavaScript代码。
根据swiper的官方教程，我们需要实例化swiper。
1、导入swiper；
2、导入swiper的css；
3、通过props获取父组件传递过来的属性listImg；
4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
props: ['listImg'],mounted() {
console.log('mounted',this)
var swiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',paginationClickable: true,loop: true,speed: 600,autoplay: 4000,onTouchEnd: function() {
swiper.startAutoplay()
}
});
}
}
</script>
第四步：写css样式。
===================================== 分割线 =============================================
最后，到这一步已经完成了一个轮播图组件了。swiper还是挺好用的。贴上完整的Banner.vue代码，一字不差。
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.url + ')' }"></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
props: ['listImg'],onTouchEnd: function() {
swiper.startAutoplay()
}
});
}
}
</script>
<style lang="less">
.swiper-container {
width: 100%;
height: 10rem;
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.swiper-pagination-bullet {
width:0.833rem;
height: 0.833rem;
display: inline-block;
background: #7c5e53;
}
}
</style>
总结：vue的轮播实现并不难，整体过程和react中很相似，途中我也遇到一个小bug，图片路径一直报错，最后我发现图片后缀不对，第一张是banner1.png，后面4张都是bannerx.jpg，图片都是从酷狗下载的，一下子没注意，被这个坑了一下。
项目地址：https://github.com/hyy1115/vu...
上一章：react转vue——vue2-webpack2框架搭建之路（1）
下一章：react转vue——webpack压缩打包vue项目（3）
如果文章对你有帮助，请点击一下推荐。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。