如何監聽父組件中呈現的所有子組件？

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.vue文件$('.synonym-list').width()這樣我就可以改變它在父組件的所有子組件，但我不知道如何管理它。我查閱了文件，沒有任何問題。如果你有任何想法，請告訴我，謝謝！

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