将 HTML 标记传递到 Vue.js Swiper 轮播组件

Question

我有一个工作轮播运行使用 Swiper Vue.js 组件，但我想弄清楚如何在我的 html 页面而不是在Vue 组件。我是 Vue 的新手，可能缺乏一些基础知识，所以可能还有很长的路要走。我一直在考虑使用插槽，但还没有想出任何办法。

这是我目前的工作：

SwiperCarousel.vue

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>
      <img src="img01.jpg">
      <caption>Caption 01</caption>
    </swiper-slide>

    <swiper-slide>
      <img src="img02.jpg">
      <caption>Caption 02</caption>
    </swiper-slide>

  </swiper>
</template>

但我希望能够做这样的事情：

HTML

<div id="app">
  <swiper-carousel>

    <div class="slide01">
      <img src="img01.jpg">
      <caption>Caption 01</caption>
    </div>

    <div class="slide02">
      <img src="img02.jpg">
      <caption>Caption 02</caption>
    </div>

  </swiper-carousel>
</div>

希望有道理，谢谢。

Answer 1

我现在已经整理好了，我认为混淆是因为我正在创建一个包含 Swiper 和 SwiperSlide 组件的单个文件组件 SwiperCarousel.vue。我已经摆脱了 SwiperCarousel.vue 并直接在 HTML.

中使用其他两个组件

App.vue

<script>
import SwiperCore, { Navigation, Pagination, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// install Swiper components
SwiperCore.use([Navigation, Pagination, A11y]);

export default {
  name: "App",
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log("slide change");
    },
  },
};
</script>

HTML

<swiper 
  :slides-per-view="3" 
  :space-between="50" 
  navigation="navigation" 
  :pagination="{ clickable: true }"
  @swiper="onSwiper" 
  @slidechange="onSlideChange"
>
  <swiper-slide>Slide 01</swiper-slide>
  <swiper-slide>Slide 02</swiper-slide>
  <swiper-slide>Slide 03</swiper-slide>
</swiper>

感谢评论。

将 HTML 标记传递到 Vue.js Swiper 轮播组件

Pass HTML markup into Vue.js Swiper carousel component

vue.js

swiperjs