Vue3中Splide循环模式下克隆幻灯片无法触发Vue事件及生命周期问题

Splide的loop模式默认通过DOM节点克隆实现循环效果，这些克隆节点并非Vue实例化的组件，因此Vue的@click事件、onMounted等生命周期钩子都无法在克隆元素上生效。以下是两种可行的解决方案：

方案一：利用Splide全局事件处理点击逻辑 #

通过给元素添加标识属性，监听Splide的全局点击事件，从事件目标中提取标识并执行对应逻辑：

修改代码示例： #

<template>
  <Splide :options="options" ref="splideInstance">
    <SplideSlide v-for="id in buttons" :key="id">
      <!-- 添加data-id属性用于标识原数据 -->
      <button :data-id="id">{{ "Button " + id }}</button>
    </SplideSlide>
  </Splide>
  <div>{{ text }}</div>
</template>

<script setup lang="ts">
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import { ref, onMounted } from "vue";
import "@splidejs/splide/dist/css/themes/splide-default.min.css";

const options = { type: "loop", perPage: 3, height: 200 };
const text = ref<string>("");
const buttons = ["button1", "button2"];
const splideInstance = ref(null);

const onClick = (id: string) => (text.value = `${id} clicked`);

onMounted(() => {
  // 获取Splide实例并监听全局点击事件
  if (splideInstance.value) {
    splideInstance.value.splide.on("click", (event) => {
      // 找到带有data-id属性的目标元素
      const targetBtn = event.target.closest("[data-id]");
      if (targetBtn) {
        const id = targetBtn.dataset.id;
        onClick(id);
      }
    });
  }
});
</script>

优势：保留Splide原生loop的流畅滚动体验，无需修改数据源，适合数据量较大的场景。

方案二：手动复制数据模拟循环效果 #

禁用Splide的loop模式，通过复制多份原数据生成足够的幻灯片，配合rewind选项实现循环视觉效果，所有幻灯片均为Vue实例化组件：

修改代码示例： #

<template>
  <Splide :options="options">
    <SplideSlide v-for="id in loopButtons" :key="id">
      <button @click="onClick(id)">{{ "Button " + id }}</button>
    </SplideSlide>
  </Splide>
  <div>{{ text }}</div>
</template>

<script setup lang="ts">
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import { ref } from "vue";
import "@splidejs/splide/dist/css/themes/splide-default.min.css";

// 禁用loop，开启rewind实现滚动到末尾自动回到开头
const options = { type: "slide", perPage: 3, height: 200, rewind: true };
const text = ref<string>("");
const buttons = ["button1", "button2"];
// 复制3份原数据，确保滚动时覆盖循环视觉需求
const loopButtons = ref([...buttons, ...buttons, ...buttons]);

const onClick = (id: string) => (text.value = `${id} clicked`);
</script>

优势：所有幻灯片均受Vue管理，@click、生命周期钩子等特性完全正常工作；无需额外处理事件逻辑。
注意：数据量极大时，复制数据可能带来轻微性能损耗，需根据实际场景调整复制份数。

内容的提问来源于stack exchange，提问作者Gladiator Boo