vue轮播图组件

新建banner.vue

HTML部分

<template>
  <div class="swiper-container swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <!-- 当banner为空时，默认一张图片 -->
        <img src="../../static/images/banner.jpg" width="100%" style="display:block;" />
      </div>
      <div class="swiper-slide">
        <!-- 当banner不为空时，循环banner里的数据 -->
        <a :href="item.url">
          <div class="swiper-img flex3"  >
          <img width="100%" :src="item.image" alt="banner" style="display:block;" /> 
          </div>
        </a>
      </div>
    </div>
    <!-- 图片的圆点 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

script部分

<script>
import Swiper from "swiper"; //引用swiper
import "swiper/swiper-bundle.css"; //引用css
export default {
  props: ["banner"], //首页传过来的数据
  mounted() {
    var mySwiper = new Swiper(".swiper1", {
      pagination: ".swiper-pagination",
      autoplay: 3000,
      paginationClickable: true,
      centeredSlides: true,
      autoplayDisableOnInteraction: false,
      preventClicks: false,
      speed: 600,
      observer: true,
      loop: true,
      observeParents: true,
    });
  },
};
</script>

导入组件

import Banner from "../components/common/Banner"; //这里指的是上面写的banner.vue   在这里可以不写后缀

注册组件

"app-banner": Banner, //使用上面的Banner.vue    这样可以在html 里直接使用<app-banner></app-banner> 就可以使用banner.vue里的内容了

 return {
      banner: [
        // { url: "http://123.com", image: "1.png" },
        // { url: "http://123.com", image: "2.png" },
      ], //虚拟数据
    };

 <!-- 轮播图 -->
      <app-banner :banner="banner"></app-banner>
      <!-- 使用banner.vue的内容，把data里的banner的数据传递过去 -->