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

Question

I'm new in Vue and tries to run the "next" method of the Slider component, after clicking the button in the Navigation component. I tried to make a mixin, but without a result.

Slider component

<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>

Navigation component

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

Answer 1

To invoke a method on a component using $refs you have to set the ref property. Have you set it?

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