0

Пытаюсь вызвать событие родительского элемента из child. Вот родительский:

<template>
    <header>
        <div v-if="this.userInformation === undefined" @click = "startLogin = true" class="login-panel">
            <img :src="image_src">
            <label>Sign in</label>
        </div>
        <login-component v-on:close-modal="closeLoginPage" v-if="startLogin === true">

        </login-component>
        <div class="clearfix"></div>
    </header>

</template>

<script>
    import LoginComponent from "./LoginComponent";
    export default {
        components: {LoginComponent},

        name: "HeaderComponent",
        data: function () {
            return {

                image_src: '/img/icon-user.svg',
                startLogin: false
            }
        },
        methods: {

            closeLoginPage: function () {
                this.startLogin = false;
            },
        }
    }
</script>

Вот child:

<template>
    <div class="modal-wrapper">
        <div class="modal-login">
            <button class="class-button" v-on:click="this.$emit('close-modal')">Close</button>
        </div>
        <div class="modal-overlay" id="modal-overlay"></div>
    </div>
</template>

<script>
    export default {
        name: "LoginComponent",
        data: function () {
            return {

            }
        },
        methods: {

        }
    }
</script>

Но событие не вызывается и пишет this.$emit is not a function. Что я делаю не так и как это лучше реализовать, заранее спасибо.

8
  • 1
    а если убрать this.?
    – Grundy
    24 сен 2018 в 18:36
  • 1
    еще тут уберите this.userInformation === undefined. Вы пишите и v-on:event="..." и @event="...", лучше использовать второй вариант и использовать только один стиль во всем проекте. 24 сен 2018 в 19:37
  • @ИльяЗеленько а чем this.userInformation === undefined плохо? Спасибо за замечание про event 25 сен 2018 в 8:58
  • @Grundy ексепшен ушёл, но метод не выполняется 25 сен 2018 в 8:59
  • this.userInformation === undefined содержит this, с ним по идее не должно работать. Попробуйте @closeModal, по моему в атрибутном html стиле не работает запись событий. 25 сен 2018 в 9:01

1 ответ 1

2

https://ru.vuejs.org/v2/guide/components-custom-events.html#sidebar-sponsors-special

this.$emit('myEvent')

<my-component v-on:my-event="doSomething"></my-component>

в вашем случае:

<button class="class-button" v-on:click="$emit('closeModal')">Close</button>
  1. имя - closeModal
  2. $emit - т.к. объявление в html разметке - this не нужен

! в js всё же будет необходимо писать так: this.$emit


если мой ответ вам не помог - рекомендую:

  1. в вопросе указать версию VueJS
  2. задать вопрос в чате - https://chat.vuejs.org/
3
  • Можете добавить, подалуйста, что this не надо и я приму ответ) 25 сен 2018 в 9:05
  • @ПавелКушнеревич, отредактировал. похоже на правду?
    – qwabra
    25 сен 2018 в 9:30
  • да, спасибо большое) 25 сен 2018 в 11:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.