2

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

我声明$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
            }
        ]
    })

主.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)
    })
4

2 回答 2

1

那么你的错误就在这里：

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

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

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

    },

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

于 2019-12-27T14:28:28.807 回答
1

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

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

于 2019-12-27T01:55:04.123 回答