Как прослушивать все дочерние компоненты, представленные в родительском компоненте?

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> 

синоним-carousel.vue

<template> 

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

</template> 


<script> 

export default { 
} 
</script> 

Моя цель состоит в том, что я хочу получить $('.synonym-list').width() в synonym.vue файл, так что я могу изменить его для всех дочерних компонентов в родительском компоненте , но я не знаю, как управлять им. Я проверил документ, не зацепившись за него. Если у вас есть идея, скажите, пожалуйста, спасибо!

Answer 1

synonym.js

<li v-for="(synonymGroup, i) of synonymGroupList" :key="synonymGroup._id"> 
    <carousel @update="onCarouselUpdate" :synonyms="synonymGroup.synonyms" :isLast="i === (synonymGroupList.length - 1)? true: false"></carousel> 
</li> 

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

синоним-карусельный:

export default { 
    mounted() { 
    if(this.isLast) { 
     this.$emit('update'); 
    } 
} 

основе @CodinCat ответа, это мое окончательное решение.

Answer 2

Использование событий.

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

...

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

синоним-карусельные:

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

документы: https://vuejs.org/v2/guide/components.html#Custom-Events