Vue событие, вызванное шиной событий, не меняет одноуровневый компонент - PullRequest
Новая
       36

Vue событие, вызванное шиной событий, не меняет одноуровневый компонент

0 голосов
/ 06 апреля 2020

У меня есть главный компонент с маршрутизаторами, связывающими различные дочерние компоненты, которые являются родственными компонентами друг друга: 

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">C1</router-link> |
            <router-link to="/c2">C2</router-link> |
            <router-link to="/c3">C3</router-link> |
            <router-link to="/c4">C4</router-link> |
            <router-link to="/c5">C5</router-link>
        </div>
        <router-view/>
    </div>
</template>

Теперь, если я инициирую событие в одном дочернем компоненте через шину Global Event (c2 ), он должен прослушивать это событие на другом компоненте (c3). Я настроил глобальную шину событий там, чтобы слушать это событие. Он также получает событие в console.log (), однако я не могу сделать так, чтобы он повторно отображал <p> -tag (или любое другое сообщение) в этом компоненте, как только он прослушивает и перехватывает событие от другого компонент ... почему? И как я могу сделать так, чтобы этот компонент перерисовывался, как только он получает событие от брата?

Мой код, который должен перерисовывать компонент: 

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p> {{ msg }}  </p>
  </div>
</template>

<script>
import { eventBus } from '../main';

export default {
    props: [],
    data() {
        return {
            msg: "nothing happened yet"
        };
    },
    watch: {
        msg: function (oldv, newv) {
            console.log("old:", oldv);
            console.log("new:", newv);
        }
    },
    methods: {
        getMsg() {
            console.log("getMsg executed!");
            this.msg = "Event triggered!";
        }
    },
    created() {
        eventBus.$on('triggeredEvent', (data) => {
            // this.getMsg();
            console.log("Event in c2.vue: triggeredEvent: ", data.detail);
            this.msg = "hiho event";
        });
    }
};
</script>

Я просто хотел бы перерисовать тег <p> с сообщением внутри ....

...