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

【问题标题】：How to listen all child components rendered in a parent component?如何监听父组件中呈现的所有子组件？
【发布时间】：2017-01-10 06:05:35
【问题描述】：

同义词.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()，这样我就可以为父组件中的所有子组件更改它，但我不知道如何管理它。我检查了文档没有钩子它。如果你有什么想法请告诉我，谢谢！

【问题讨论】：

标签： vue.js vue-component vuejs2

【解决方案1】：

同义词.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 的回答，这是我的最终解决方案。它的优点是它不会触发每个列表项的更新（因为使用了 v-for），而只会触发最后一个，所以当“一切准备就绪”时。

【讨论】：

【解决方案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

【讨论】：