vue.js三十八—— 抽离轮播图组件

我们发现，在首页和商品详情都会使用到轮播图，但是，我们在首页的轮播图是写在页面中的，为了能够复用，我们可以将轮播图功能抽离成一个单独的组件。

1. 新建子组件swiper.vue模板

<template>
    <div>
        
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped >

</style>

2. 将首页的轮播图代码拷贝到swiper组件模板的div中

<template>
    <div>
        <!-- 这是轮播图区域 -->
        <mt-swipe :auto="4000" >
            <!-- 在组件中，使用v-for的话，一定要指定key -->
            <mt-swipe-item v-for=" item in lunbotuList" :key="item.img" >
                <img :src="item.img">
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped >

</style>

3. 拷贝轮播图样式到style标签中

.mint-swipe {
        height: 200px;
        .mint-swipe-item {
            &:nth-child(1) {
                background-color: red;
            }
            &:nth-child(2) {
                background-color:yellow;
            }
            &:nth-child(3) {
                background-color:pink;
            }

            img {
                width:100%;
                height:100%;
            }

        }
    }

4. 分析子组件

该组件为公用轮播图组件，其中用到了一个lunbotuList的集合用于提供数据，应该是谁用到这个组件谁给提供数据，这个就是典型的父组件向子组件传值，所以我们需要在与data平级的地方定义一个props数组来接收父组件传递的值。

props:["lunbotuList"]

注意：我们约定父组件给子组件传值的属性名叫lunbotuList

完整的子组件文件

<template>
    <div>
        <!-- 这是轮播图区域 -->
        <mt-swipe :auto="4000" >
            <!-- 在组件中，使用v-for的话，一定要指定key -->
            <mt-swipe-item v-for=" item in lunbotuList" :key="item.img" >
                <img :src="item.img">
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    props:[
        "lunbotuList"
    ]
}
</script>

<style lang="scss" scoped >
    .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            &:nth-child(1) {
                background-color: red;
            }
            &:nth-child(2) {
                background-color:yellow;
            }
            &:nth-child(3) {
                background-color:pink;
            }

            img {
                width:100%;
                height:100%;
            }

        }
    }
</style>

5. 在父组件引用子组件

父组件引用子组件分三步

5.1 导入子组件

import swiper from '../subComponents/swiper.vue';

5.2 新建components节点

在与methods平级的地方新建一个components节点，并引入组件名

components:{ swiper }

5.3 在界面中使用子组件

<swiper :lunbotuList="lunbotu"></swiper>>

注意：这里因为需要向子组件传值，我们规定子组件接收父组件的值的属性名为lunbotuList，所以这里通过属性绑定的形式（:lunbotuList="lunbotu"）将值传给子组件