Как сделать этот vue компонент многоразовым с его реквизитом? - PullRequest
Новая
       3

Как сделать этот vue компонент многоразовым с его реквизитом?

1 голос
/ 10 января 2020

Я пытаюсь сделать этот компонент многократно используемым, чтобы потом можно было установить его в любом проекте и через реквизиты добавить необходимые значения, например изображения и параметры функций (далее, ранее, интервалы ...) внутри любого компонента. 

        <template>
        <div>
            <transition-group name='fade' tag='div'>
              <div v-for="i in [currentIndex]" :key='i'>
                <img :src="currentImg" />
              </div>
            </transition-group>
            <a class="prev" @click="prev" href='#'>&#10094;</a>
          <a class="next" @click="next" href='#'>&#10095;</a>
          </div>
        </template>

        <script>
        export default {
          name: 'Slider',
          data() {
            return {
              images: [
                'https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg',
                'https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg',
                'https://cdn.pixabay.com/photo/2015/05/15/14/27/eiffel-tower-768501_1280.jpg',
                'https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg'
                ],
              timer: null,
              currentIndex: 0,
            }
          },

            mounted: function() {
              this.startSlide();
            },

            methods: {
              startSlide: function() {
                this.timer = setInterval(this.next, 4000);
              },


              next: function() {
                this.currentIndex += 1
              },
              prev: function() {
                this.currentIndex -= 1
              }
            },

            computed: {
              currentImg: function() {
                return this.images[Math.abs(this.currentIndex) % this.images.length];
              }
            }

        }
        </script>

    styles...

Так что позже это будет <Slider... all props, images loop here/> внутри других компонентов.

Как этого достичь?

1 Ответ

1 голос
/ 10 января 2020

Просто переместите то, что нужно из другого компонента, в props. Таким образом, другой компонент может передавать необходимую ему необходимую информацию. 

export default {
          name: 'Slider',
          props: {
              images: Array,
              next: Function
              prev: Function,
              // and so on
          },
...

Родительский компонент будет называть его следующим образом: 

<Slider :images="imageArray" :next="nextFunc" :prev="prevFunc" />

РЕДАКТИРОВАТЬ

Вы можете передать интервал значение через реквизит: 

export default {
          name: 'Slider',
          props: { intervalVal: Number },
          methods: {
              startSlide: function() {
                this.timer = setInterval(this.next, this.intervalVal);
              },
          }

Вы также можете передать функцию от родителя ребенку через реквизит. 

export default {
          name: 'Slider',
          props: { next: Function },
          methods: {
              someMethod: function() {
                this.next() // function from the parent
              },
          }

Я не совсем понимаю ваш вариант использования 100%, но это возможные варианты .

...