【0】-【3】
<template> <div> <h1>路由实例parent</h1> <hr/> <!-- 【1】使用swiper的轮播组件 --> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide v-for="(img,i) in imgs" :key="i"> <img :src="img"/> </swiper-slide> <!-- Optional controls --> <div slot="pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。--> <!-- <div slot="button-prev"></div> <div slot="button-next"></div> <div slot="scrollbar"></div> --> </swiper> </div> </template> <script> export default{ name:\'parent\', components:{}, data(){ return{ //【2】配置轮播相关参数都写在此对象内部 swiperOption: { pagination: { el: \'.swiper-pagination\', }, }, imgs:[//【0】定义一些图片 "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658", "https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg", "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658", ] } }, filters:{}, directives:{}, } </script> <style scoped> /* 【3】控制轮播图样式 */ .swiper-container{ --swiper-theme-color: #ff6600; --swiper-pagination-color: #00ff33;/* 两种都可以 */ } img { width:800px; } </style>效果：