[Vuejs]-Modify child component data added via slots from parent component in vuejs

by

0👍

The parent-child relationship is actually established by importing the child component into the parent component, and including the child in the parent’s ‘components’ option.

I created an example scenario with simple Parent and Child component definitions in order to show a standard relationship implementation. Built with Vue 2 and the Vue CLI.

MySlider.vue (parent)

<template>
  <div class="my-slider">
    <h4>My Slider</h4>
    <my-slider-item v-for="(item, index) in sliderItems" :key="index" :sliderItem="item" />
  </div>
</template>

<script>
  import MySliderItem from './MySliderItem.vue'

  export default {
    components: {
      MySliderItem
    },
    data() {
      return {
        sliderItems: [
          {
            name: 'Slider Item 1'
          },
          {
            name: 'Slider Item 2'
          },
          {
            name: 'Slider Item 3'
          }
        ]
      }
    }
  }
</script>

MySliderItem.vue (child)

<template>
  <div class="my-slider-item">
    <h5>{{ sliderItem.name }}</h5>
  </div>
</template>

<script>
  export default {
    props: {
      sliderItem: {
        type: Object,
        required: true
      }
    }
  }
</script>

Leave a comment