Vue UserDetailBus。$ on不获取发出的数据

Question

我有2个子组件。期望的结果是，在我提交作为子组件之一的表单之后，将用户详细信息作为对象发送给另一个子组件，然后该子组件将显示用户详细信息。 UserDetailsBus。$ emit似乎可以正常工作，因为执行了测试控制台日志，但是其他组件没有得到我发出的对象，也没有记录到控制台。

表单组件

<script>
import {UserDetailsBus} from '../main';
export default {
    data(){
        return{
            willSubmit: '',
            formUser : {
                firstName : '',
                lastName : '',
                email : '',
                password : '',
                confirmPassword : '',
                subscribe : '',
            }
        }
    },
    props :['isSubmitted']
    ,
    methods :{
        sendMessageToParent(){
            this.willSubmit = true;
            this.$emit('messageFromChild',this.willSubmit);
        },
        sendMessageToDetails(){

            UserDetailsBus.$emit('message-from-form',this.formUser);
            console.log('Hellooo');
        }
    }
}
</script>

UserDetails组件

<script>
    import {UserDetailsBus} from '../main';
    export default {
        data(){
            return{
                detailsUser : Object,
            }
        },
        props : ['isSubmitted'],
        mounted() {
            UserDetailsBus.$on('message-from-form',formUser => {
                console.log('chill');

                this.detailsUser = formUser;
                return this.detailsUser;
            })
        }
    }
</script>