Question

我有一个Banner组件，它根据道具显示不同的图像，例如，一个由3-4个横幅组成的页面如下所示：

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

当user单击横幅时，我需要将该事件传播到该页面上存在的所有同级组件。因此，在这种情况下，一个Banner组件。

但这毕竟是场景背后的相同组件，已经是mounted。

如何在此实例中共享传播数据？

Answer 1

您可以使用emit

使用“发射”是很直截了当的

注意：emit('myEmitEvent')方法不会仅针对同级组件，注册了@myEmitEvent的任何组件都会收到消息

<!-- 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>

如果您正在使用vuex存储库，则可以通过使用computed属性将其用于更多的间接通信，但是如果您不使用vuex存储库，则这样做会更加虚构< / p>

相同组件的同级组件通信

1 个答案: