CODEWITHSUNDEEP
vue.jsvuejs2vue-component
NewTech Lover
NewTech Lover

Reputation: 1263

How to make this vue component reusable with it's props?

I am trying to make this component reusable so later can install it in any project and via props add needed values e.g. images and function parameters (next, prev, intervals...) inside any component.

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

So later it would be <Slider... all props, images loop here/> inside other components.

How can be it be achieved?

Upvotes: 1

Views: 283

Answers (1)

T. Short
T. Short

Reputation: 3614

Just move what needs to come from another component to props. That way other component can pass the relevant info it needs.

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

The parent component would call it like:

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

EDIT

You can pass an interval value via props:

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

You can also pass function from parent to child via props.

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

I don't really understand your use case 100% but these are possible options.

Upvotes: 1

Related Questions