Как использовать метод Slick.js в другом компоненте - Vue - PullRequest
Новая
       13

Как использовать метод Slick.js в другом компоненте - Vue

0 голосов
/ 02 июля 2018

Я новичок в Vue и пытаюсь запустить метод "next" компонента Slider после нажатия кнопки в компоненте Navigation. Я пытался сделать миксин, но безрезультатно.

Компонент слайдера 

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

1 Ответ

0 голосов
/ 02 июля 2018

Чтобы вызвать метод для компонента, использующего $refs, необходимо установить свойство ref. Вы установили это? 

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