создавать динамические события для компонента VUE - PullRequest
Новая
       7

создавать динамические события для компонента VUE

0 голосов
/ 26 октября 2019

У меня проблема с маршрутами vue. Я использую laravel 6 с vue@2.6.10

Я хочу создать кнопку действий в заголовке динамически (действия различаются в зависимости от компонента). Этот компонент AppHeader находится на каждом компоненте, и на текущем компоненте, который я хочу создать в заголовке, события для текущего компонента.

Например, компонент CategoryDetails. Я хочу иметь два действия в заголовке (сохранить и выйти).

Маршрут для категории такой: 

        path: '/',
        redirect: 'dashboard',
        component: DashboardLayout,
        children: [
            {
                path: '/categories',
                component: Category,
                name: 'category',
                meta: {
                    requiresAuth: true
                }
            },
            {
                path: '/categories/:CategoryID',
                component: CategoryDetails,
                name: 'category-details',
                props: true,
                meta: {
                    requiresAuth: true
                }
            },
        ]

В компоненте CategoryDetails: 

<template>
    <div>
        <app-header :actions="actions"></app-header> 
        // other code
    </div>
</template>

<script>
    import AppHeader from "../../layout/AppHeader";
    export default {
        name: "CategoryDetails",
        components: {AppHeader},
        data() {
            actions: [{label: 'Save', event: 'category.save'}, {label: 'Exit', event: 'category.exit'}],
        },
        mounted() {
            const vm = this;
            Event.$on('category.save', function(){
                alert('Save Category!');
            });
            Event.$on('category.exit', function(){
                vm.$router.push({name: 'category'});
            });
        }
    }
</script>

Я создал объект действия, который сообщает компоненту заголовка, чтособытия для генерации и прослушивания их в этом компоненте.

В компоненте AppHeader: 

<template>
    <div v-if="typeof(actions) !== 'undefined'" class="col-lg-6 col-sm-5 text-right">
        <a href="javascript:void(0)" class="btn btn-sm btn-neutral" v-for="btn in actions" @click="onActionClick(btn.event)">{{ btn.label }}</a>
    </div>
</template>
<script>
export default {
    name: "AppHeader",    
    props: [
        'actions'
    ],
    methods: {
        onActionClick(event) {
            Event.$emit(event);
        }
    }
}
</script>

Событие - это «событие шины», определенное в app.js 

/**
 * Global Event Listener
 */

window.Event = new Vue();

Итак ... давайте проверим:)

Я в компоненте категории. Нажмите на детали категории ... действия находятся в заголовке (сохранить и выйти). Нажмите на выход ... мы переместились обратно к компоненту категории ... нажмите еще раз, чтобы перейти к деталям категории, и нажмите Сохранить ... предупреждение появляется ДВАЖДЫ.

Выйдите и войдите снова ... предупреждение "Сохранить категорию!"появляется 3 раза ..... и так далее ...

Почему?

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Согласно этому посту: https://forum.vuejs.org/t/component-not-destroying/25008/10

Я должен уничтожить "эффект зомби" 

destroyed() {
    Event.$off('category.save');
    Event.$off('category.exit');
}
0 голосов
/ 26 октября 2019

Я думаю, что проблема не в ваших маршрутах. Я не знаю, но попробуйте протестировать ваше событие локально (а не глобально) в интересующем компоненте. Может быть повторяющееся действие (CategoryDetails).

...