react转vue——vue2封装swiper轮播组件(2)

前端之家收集整理的这篇文章主要介绍了react转vue——vue2封装swiper轮播组件(2)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习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)

如果文章对你有帮助,请点击一下推荐。

猜你在找的React相关文章