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

【问题标题】：VueJS $emit and $on not working in one component to another component pageVueJS $emit 和 $on 不在一个组件中工作到另一个组件页面
【发布时间】：2020-04-16 18:43:12
【问题描述】：

我正在尝试长时间使用 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>

路由器视图：

    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)
    })

【问题讨论】：

你如何测试这个？您是否打开了两个选项卡，然后在浏览器的选项卡上加载页面？
是什么触发了您的sender() 方法？
嗨 Onwuka，我只是在重定向到接收器页面后传递了点击事件保存发射值。但是我在接收器页面中没有收到任何 $on 触发事件。
嗨，简短，我需要为接收者页面获取 $on 触发事件

标签： javascript vue.js vue-router eventemitter vue-events

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你的错误在这里：

created() {
       EventBus.$on('message', this.Receive);
    },

第二个参数是一个处理程序，它应该如下所示：

created() {
        EventBus.$on('message', function(data){
           this.Receive(data);
           console.log(data)
        });

    },

您现在应该看到 2 条 console.log() 消息

【讨论】：