Почему не работает $emit в компоненте?

Question

[KuzmenkoArtem]

<template>
    <div class="modal fade" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="ks-text">Add Deadline</span>
                    <button type="button" class="close" data-dismiss="modal">
                        <span class="icon icon-clear"></span>
                    </button>
                </div>

                <div class="modal-body" ></div>

                <div class="modal-footer">
                    <button type="button" class="btn cancel">Cancel</button>
                    <button type="button" class="btn add" @click="submitForm()">Add Deadline</button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            showModal: function () {
                $('#modal').modal('show');
            },

            submitForm: function () {
                this.$emit('added');
            },
        }
    }
</script>

Если функцию вызвать через $refs, то $emit срабатывает.
По каким причинам может не работать, на что можно посмотерть?
Спасибо.

UPD: Сама строка с $emit выполняется

UPD: Код где обработка:

<deadline-adding ref="deadlineAdding" @added="console.log(deadline adding)"></deadline-adding>

// Вариант с  вызовом метода из refs работает и слушатель 'added' выполняется
<button @click="$refs.deadlineAdding.submitForm()"></button>

Comments

[Владимир]

А если @click="submitForm()" исправить на @click="submitForm" ?
И где обработчик this.$on('added', function () => {}) ?

[KuzmenkoArtem]

z3d01n, Ну там сама строка с $emit выполняется

[Владимир]

KuzmenkoArtem, ладно... Скажу "в лоб": попробуйте убрать скобки в шаблоне при вызове метода submitForm по клику. Тогда кнопка будет работать.

[KuzmenkoArtem]

Владимир, Так кнопка работает

[KuzmenkoArtem]

Владимир, В любом случае попробовал, строка выполняется, $emit не срабатывает

[Владимир]

KuzmenkoArtem, что вы подразумеваете под словами "$emit не срабатывает"? Для того, чтобы можно было дальше искать причину не могли бы вы привести здесь код "отлова" события ($on('added', function() {}))? Где он у вас находится?

[KuzmenkoArtem]

Владимир, Обновил вопрос. Прошу обратить внимание на то что из $refs событие обрабатывается как положено

[Владимир]

KuzmenkoArtem, на сколько мне известно, this.$emit('event_name') порождает событие "event_name" в родительском компоненте.

<component-a @event="alert('It's not working')"></component-a>
<component-b @event="alert('It's working')">
    <component-c>
        ...
        <button @click="submitMethod">Emit</button>
    </component-c>
</component-b>

<script>
...
    name: 'component-c',
    methods: {
        submitMethod() {
            this.$emit('event');
        }
    }
</script>

Вы через:
1. this.$emit('event_name') генерируете событие в родительском компоненте. Соответственно в нем должен быть соответствующий обработчик события.
2. $refs.deadlineAdding.submitForm() находите компонент deadlineAdding и вызываете в нем метод submitForm. Никаких событий при этом не генерируется.

[KuzmenkoArtem]

Владимир,
1. Соответствующий обработчик есть (в примере привел)
2. Событие генерируется. `console.log` - срабатывает

[markmariner]

Используйте глобальную шину событий: https://alligator.io/vuejs/global-event-bus/