Javascript 同一组件的同级组件通信

我有一个

横幅

组件，它根据道具显示不同的图像，例如，由3-4个横幅组成的页面看起来像：

<Banner type="wide"></Banner>
<Banner type="small"></Banner>
<Banner type="medium"></Banner>

当

user

单击横幅时，我需要将事件传播到该页面上的所有同级组件。因此，在本例中是一个

横幅
组件

但它毕竟是幕后的同一个组件，已经安装了

如何在此实例中共享传播数据？
您可以使用
emit

使用emit相当直接

注意：
emit（'myMiteEvent'）
方法不会只针对同级组件，任何为
@myMiteEvent
注册的组件都会收到消息

<!-- Banner.vue -->
<!-- note that this is not working code, but a means to demonstrate -->
<!-- how to use the 'emit' method -->

<template>
    <app>
        <img @click="notify" @bannerEvent="subscribe"/>
    </app>
</template>

<script>
    export default {
        methods: {
            notify () {
                this.$emit('bannerEvent', somePayloadIfYouWant)
            },

            subscribe (payload) {
                console.log(payload)
            }
        }
    }
</script>


导出默认值{
方法：{
通知（）{
这是。$emit（'bannerEvent'，如果你想要的话可以下载）
},
订阅（有效负载）{
控制台日志（有效负载）
}
}
}

如果您使用的是vuex存储，您可以通过使用
computed
属性将其用于更间接的通信，但如果您不使用
vuex
store
则这有点做作，这取决于您试图完成的任务。当其中一个横幅被点击时，横幅是否会改变状态？如果是这样，当其中一个孩子发出“点击”事件时，家长可能会向所有孩子传递一个道具。@DavidWeldon:你是说孩子->家长->所有孩子的（广播）？孩子向家长发出点击事件->家长改变状态以了解单击了哪个孩子->家长向每个孩子传递上一次单击的
横幅的id/name/等。每个孩子都可以
查看
，查看上次单击项目的更改。