VueJS: запуск функции в родительском компоненте, когда событие инициируется в дочернем компоненте - PullRequest
Новая
       75

VueJS: запуск функции в родительском компоненте, когда событие инициируется в дочернем компоненте

0 голосов
/ 04 декабря 2018

Это мой первый настоящий проект Vue JS ... Я искал в Stack O и не могу найти ничего, что конкретно касается моей проблемы, но я прошу прощения, если об этом уже спрашивали.

Проблема

У меня есть два компонента, родительский макет страницы, в то время как дочерний элемент является модулем этой страницы.Когда кто-то нажимает на кнопку в дочернем компоненте, я хочу вызвать функцию в родительском компоненте.

Часть процесса $ emit запускается правильно в соответствии с VueJS Dev Tools, но функция вродитель не запускается.

Куда я иду не так?

Вот мой сокращенный код (я удалил все, что не связано с проблемой) ...

Родительский компонент 

<template>
    <div :toggle-nav="showHideNav" :class="navState">
        <div class="wrapper">
            <layout-toolbar></layout-toolbar>
        </div>
    </div>
</template>
<script>
    import layoutToolbar from '~/components/layout/toolbar.vue'

    export default {
        components: {
            layoutToolbar,
        },
        data: function() {
            return {
                navState: 'menu-closed'
            }
        },
        methods: {
            showHideNav: function(event) {
                if (this.navState == 'menu-closed') {
                    this.navState = 'menu-open'
                } else {
                    this.navState = 'menu-closed'
                }
            }
        }
    }
</script>

Дочерний компонент 

<template>
    <div class="toolbar" role="navigation">
        <div class="tools" role="group">
            <button 
                class="button-icon" 
                aria-label="Open Navigation" 
                @click="$emit('toggle-nav')">
                    <i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
                    <span class="sr-only">Open Navigation</span>
            </button>
        </div>
    </div>
</template>

Нужно ли использовать реквизит ?

Цените любую помощь, которая может быть предложена.

1 Ответ

0 голосов
/ 04 декабря 2018

Вы должны передать функцию в качестве реквизита, а затем испустить эту функцию из вашего дочернего компонента.Итак, ваш родительский шаблон выглядит следующим образом.

<template>
    <div :toggle-nav="showHideNav" :class="navState">
        <div class="wrapper">
            <layout-toolbar @showHideNav="showHideNav"></layout-toolbar>
        </div>
    </div>
</template>

А ваш дочерний шаблон выглядит так 

<template>
    <div class="toolbar" role="navigation">
        <div class="tools" role="group">
            <button 
                class="button-icon" 
                aria-label="Open Navigation" 
                @click="$emit('showHideNav',<pass-your-event-or-data>)">
                    <i aria-hidden="true" class="far fa-bars" title="Open Navigation"></i>
                    <span class="sr-only">Open Navigation</span>
            </button>
        </div>
    </div>
</template>
...