javascript - VueJS $emit 和 $on 不在一个组件中工作到另一个组件页面

Question

我正在尝试长时间使用 Vue $emit 和 $on 功能，但仍然没有得到任何解决方案。我创建了简单的消息传递页面，只有两个页面。一个是Component Sender和Component Receiver，并为$emit和$on添加了eventbus > 功能。

我声明了 $emit 和 $on 功能，但我不知道我在哪里犯了错误。

请帮助某人。

组件发送者:

    <script>
    import { EventBus } from '../main';
    export default {
        name: 'Send',
        data () {
            return {
                text: '',
                receiveText: ''
            }
        },

        methods: {
            sender() {
                 EventBus.$emit('message', this.text);
                 this.$router.push('/receive');
            }
        }
    }
    </script>

组件接收器:

    <script>
    import { EventBus } from '../main';
    export default {
        name: 'Receive',
        props: ["message"],
        data () {
            return {
                list: null
            }
        },
        created() {
            EventBus.$on('message', this.Receive);

        },
        methods: {
            Receive(text){
                console.log('text', text);
                this.list = text;
            },
            save() {
                alert('list', this.list);//need to list value but $emit is not working here

            }
        }
    }
    </script>

路由器 View :

    const router = new Router({
        mode: 'history',
        routes: [
            {
                path: "/",
                name: "Send",
                component: Send
            },
            {
                path: "/receive",
                name: "Receive",
                component: Receive,
                props: true
            }
        ]
    })

Main.JS

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router';

    export const EventBus = new Vue();

    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

Answer 1

EventBus 旨在允许页面上同时存在的两个组件之间进行通信。。如果您需要在路由器 View 之间保留数据，那么您应该考虑使用 Vuex 存储。

实际上，发送消息时接收器组件并不存在，因此它没有附加到该事件的监听器。