Компонент одного и того же компонента

Question

У меня есть компонент Banner, который показывает различные изображения на основе реквизита, например, страница, состоящая из 3-4 баннеров, будет выглядеть так:

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

Когда user нажимает на баннер,Мне нужно распространить событие на все компоненты одного уровня, присутствующие на этой странице. Так что в этом случае Banner компонент.

Но это все тот же компонент за сценой, который уже mounted.

Как обмениваться данными распространения в этом случае?

Answer 1

Вы можете использовать emit

Использование 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 store