Nuxt应用使用flickity轮播时自定义按钮触发Flickity未定义报错

问题原因 #

• 1. 你仅全局注册了Flickity为Vue组件，没有将Flickity原生构造函数注入到当前组件的script作用域，直接调用new Flickity()自然会报未定义错误。
• 2. 完全不需要手动初始化Flickity实例：你已经给封装好的vue-flickity组件绑定了ref="flickity"，直接通过该ref即可调用所有Flickity原生方法，重复初始化反而会导致功能冲突。
• 3. 生命周期选择错误：beforeCreate阶段组件还未完成挂载，不仅Flickity组件未初始化，你要查询的自定义按钮DOM也不存在，无法正常绑定事件。
• 4. 事件监听逻辑存在内存泄漏风险：绑定和移除事件时使用的是不同的匿名函数引用，无法成功移除事件，且局部变量在beforeDestroy中无法访问，执行移除逻辑时也会报错。

修正后代码 #

<template>
    <ClientOnly>
        <Flickity
            ref="flickity"
            :key="keyIncrementer"
            class="carousel"
            :class="{ 'carousel--active': active }"
            :options="computedOptions"
        >
            <slot />
        </Flickity>
    </ClientOnly>
</template>

<script>
export default {
  mounted() {
    // 绑定事件前先判断DOM是否存在
    this.previousButton = document.querySelector('.button--previous')
    this.nextButton = document.querySelector('.button--next')
    if (this.previousButton) {
      this.previousButton.addEventListener('click', this.goPrev)
    }
    if (this.nextButton) {
      this.nextButton.addEventListener('click', this.goNext)
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.debounceRefresh)
    // 移除事件时使用和绑定时相同的函数引用
    if (this.previousButton) {
      this.previousButton.removeEventListener('click', this.goPrev)
    }
    if (this.nextButton) {
      this.nextButton.removeEventListener('click', this.goNext)
    }
  },
  methods: {
    goPrev() {
      // 直接通过ref调用flickity实例的翻页方法
      this.$refs.flickity.previous()
      // 如果上述调用失效可以用原生实例调用：this.$refs.flickity.$flickity.previous()
    },
    goNext() {
      this.$refs.flickity.next()
    }
  }
}
</script>

小提示：如果自定义控制按钮是写在当前组件内部，推荐给按钮也绑定ref，代替document.querySelector查询，避免DOM选择范围不准确的问题。

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