如何监听父组件中呈现的所有子组件？

问题描述：

<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()这样我就可以改变它在父组件的所有子组件，但我不知道如何管理它。我查阅了文件，没有任何问题。如果你有任何想法，请告诉我，谢谢！

答

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的答案，这是我最后的解决。

答

使用事件。

<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

如何监听父组件中呈现的所有子组件？

相关推荐