How to listen all child components rendered in a parent component?

Question

synonym.vue

<template>

<div id="synonym-container">
    <div></div>
    <div id="synonym-group-list-wrapper">
        <ul id="synonym-group-list">
            <li v-for="synonymGroup of synonymGroupList" :key="synonymGroup._id">
                <carousel :synonyms="synonymGroup.synonyms"></carousel>
            </li>
        </ul>
    </div>
</div>

</template>

<script>

import Carousel from './synonym-carousel.vue'
import $ from 'jquery'

export default {
    components: {
        'carousel': Carousel,
    },
    mounted() {
        console.log($('.synonym-list'));
    },
}
</script>

synonym-carousel.vue

<template>

<div class="synonym-group">
    <ul class="synonym-list">
        <li></li>
    </ul>
</div>

</template>


<script>

export default {
}
</script>

My goal is that I want to get $('.synonym-list').width() in synonym.vue file so I can change it for all child component in parent component, but I don't know how to manage it.I checked document theres no hook for it. If u have any idea please tell me, thanks!

Answer 1

Use events.

<carousel @update="onCarouselUpdate" :synonyms="synonymGroup.synonyms"></carousel>

...

export default {
  components: { ... },
  mounted () { ... },
  methods: {
    onCarouselUpdate () {
      console.log('Carousel Updated!')
    }
  }
}

synonym-carousel:

export default {
  updated () {
    this.$emit('update')
  }
}

docs: https://v2.vuejs.org/v2/guide/components.html#Custom-Events