分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了将 HTML 标记传递给 Vue.js Swiper carousel 组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将 HTML 标记传递给 Vue.js Swiper carousel 组件？

开发过程中遇到将 HTML 标记传递给 Vue.js Swiper carousel 组件的问题如何解决？下面主要结合日常开发的经验，给出你关于将 HTML 标记传递给 Vue.js Swiper carousel 组件的解决方法建议，希望对你解决将 HTML 标记传递给 Vue.js Swiper carousel 组件有所启发或帮助；

我有一个使用 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>

希望这是有道理的，谢谢。

解决方法

我现在已经整理好了，我认为混乱是因为我正在创建一个包含 SwiperCarousel.vue 和 Swiper 组件的单个文件组件 SwiperSlide。我去掉了 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,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>

感谢您的评论。