Laravel 为vue组件创建动态事件

我对vue路线有问题。我正在使用laravel 6和vue@2.6.10

我想动态地在标题中创建actions按钮（操作是不同的，这取决于组件）。此AppHeader组件位于每个组件和当前组件上，我希望在标头中为当前组件创建事件

例如，我希望在标题中有两个操作（保存和退出）的component 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
                }
            },
        ]

在组件类别详细信息中：

<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>

所以。。。让我们测试一下：）

我在类别组件中。单击类别详细信息。。。操作在标题中（保存和退出）。单击退出…我们将区域推回类别组件。。。再次单击转到类别详细信息，然后单击保存。。。警报出现两次

退出并再次进入。。。“保存类别！”警报出现3次……以此类推

---

为什么？

我认为问题不在于你的路线。我不知道，但请尝试在感兴趣的组件中本地（而不是全局）测试您的事件。可能会有重复操作（CategoryDetails）。

根据本文：

我必须摧毁“僵尸效应”

<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>

/**
 * Global Event Listener
 */

window.Event = new Vue();

destroyed() {
    Event.$off('category.save');
    Event.$off('category.exit');
}