Что не так с моим event.bus в vue?

Question

[Darkness]

Main.js

Vue.config.productionTip = false;
   export const EventBus = new Vue();

1-й компонент

import { EventBus  } from '../../../main';

 EventBus.$emit("emmitTest", this.showChoose); // передаю true

2-й компонент

import { EventBus  } from '../../../main';

created() {
       EventBus.$on('emmitTest', data => {
            this.showChoose = data; .// это должно изменить в data showChoose на true из другого компонента,
        });
    },

Но значение не записывается, нет ни ошибки, ничего. Просто не робит, где ошибка?

В Родителе этих компонентов, ничего не делаю, буду благодарен за помощь!

Comments

[alex]

где вы эмитите emmitTest? похоже что вы эимтите раньше чем подписываетесь

[Darkness]

Alex, да, верно, сначала появляется первый компонент, потом, после нажатия кнопки происходит emit, только потом появляется 2 компонент, где я хочу получить значение из первого, а как верно сделать? Компоненты находятся на одном уровне

[alex]

Darkness,

где вы эмитите emmitTest?

весь код покажите

[Darkness]

Alex, Тут 2 компонента и где вызов их ТУТ

Вот где emit

<template lang="pug">
    .login-form
        h1 Верни налог
        p номер телефона
        el-form(@submit.prevent.native="sendPhone()", 
                label-position='left', 
                :model='loginForm', 
                :rules="rules",
                status-icon,
                ref="loginForm" )
            el-form-item(prop="phone")
                //- el-input(v-model='loginForm.phone', placeholder="Введите свой номер телефона", id="form_phone" maxlength='12')
                input(v-model='loginForm.phone', v-mask="'+7(###) ###-##-##'" @ev placeholder="+7()", id="form_phone" ref="telLogin" @mouseout="mouseout" @mouseover="mouseOver")
            button(class="btn", type='button', @click='sendPhone()' :disabled="disBtn" ) Отправить
</template>

<script>

import { EventBus } from '../../../main';


import phoneApi from '../_api/phoneApi.js'
import {mapActions, mapGetters } from "vuex"

export default {
    data() {
        var validatePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Обязательное поле'));
            } else {
                let re = /^(\+7|7|8)?[\s-]?\(?[489][0-9]{2}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/;
                const isTrue =  re.test(value);
                if (!isTrue) {
                    callback(new Error('Неправильный телефон'));
                    this.$refs.telLogin.style.border = '1px solid red'
                } else {
                    this.$refs.telLogin.style.border = '1px solid green'
                    callback();
                }
            }
        };
        return {
            phone: false,   
            disBtn: false,
            loginForm: {
                phone: ''
            },
            rules: {
                phone: [ {validator: validatePhone, trigger: this.phone = 16 }]
            },
            showChoose: true
        };
    },
    methods: {
        ...mapActions({
            updatePhone: "profile/updatePhone",
            updateEmail: "profile/updateEmail",
            updateName: "profile/updateName",
            updateId: "profile/updateId",
            updateIncoming: "profile/updateIncoming",
            updateIncomingSecondAcc: 'profile/updateIncomingSecondAcc'
        }),
        sendPhone() {
            // блок кнопки на 4 сек 
            this.disBtn = true
            setTimeout(() => {
                this.disBtn = false
            }, 4000)
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    phoneApi.sendSms(this.loginForm.phone)
                    .then((response) => {
                        this.updatePhone(this.loginForm.phone);
                        this.updateName(response.data.name)
                        this.updateEmail(response.data.email);
                        this.updateId(response.data.id);
                        
                        if(response.data.length >= 2) {
                           this.updateIncoming(response.data[0])
                           this.updateIncomingSecondAcc(response.data[1])
                           
                            EventBus.$emit("emmitTest", this.showChoose);
                        }
                    })
                    .catch((e) => {
                        this.$message.error('Ошибка при отправке смс. Повторите попытку позже')

                        if(e.response.status == '429') {
                            this.$message.error('Превышено количество попыток авторизации. Попробуйте позднее')
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        mouseOver() {
            this.$refs.telLogin.placeholder = '+7(___) ___ - __ - __'
        },
        mouseout() {
            this.$refs.telLogin.placeholder = '+7()'
        }
    }
}
</script>

<style lang="stylus">
    .login-form
        width 100%
        h1
            font-weight 500
            line-height 21px
            margin 138px 0 49px
            font-size 28px
        p
            margin 15px 0
        input
            text-align center
    #form_phone
        width 100%!important
        color #606266
        font-size 22px
</style>

[alex]

Darkness, я если често вообще не понял, что и где у вас там появляется. 2ой компонент динамически чтоле появляется?

[Darkness]

Второй да, через if ( тип проверка идет если телефон в vuex не null, то отобразить 2 компонент) , тут скорее всего и проблема с eventBus

[Василий]

Если нельзя передать через props, то есть 2 варианта:
1. Записать во Vuex и во втором компоненте брать из vuex
2. Делать emit во втором компоненте, передавать колбэк, который будет принимать data и устанавливать showChoose во втором компоненте. В первом компоненте ловить событие и вызывать колбэк с showChoose.

[Darkness]

Василий, так и сделал ) через vuex пришлось, скорее всего потому что компонент динамически рендирится event bus просто не проходил :с