Question

我是Vue的新手，在单击“导航”组件中的按钮后，尝试运行Slider组件的“下一个”方法。我试图做一个混合，但没有结果。

滑块组件

<template>
  <slick ref="slick" :options="slickOptions">
   ...images
  </slick>
</template>

<script>
  import Slick from 'vue-slick';

  export default {
    name: 'Slider',
    components: {
      'slick': Slick
    },
    data() {
      return {
        slickOptions: {
          infinite: true,
          centerMode: true,
          centerPadding: '90px',
          slidesToShow: 1,
          arrows: false,
          dots: false
        }
      };
    },
    methods: {
      next() {
        this.$refs.slick.next();
      },
      prev() {
        this.$refs.slick.prev();
      }
    }
  };
</script>

导航组件

<template>
  <button @click="next()">
    <img src="button.url" alt="button.alt">
  </button>
</template>

Answer 1

要使用$refs在组件上调用方法，必须设置ref属性。你设置好了吗？

<slick ref="slick" :options="slickOptions"></slick>

如何在另一个组件中使用Slick.js方法-Vue

1 个答案: