Question

我对Vue路线有疑问。我在vue@2.6.10上使用laravel 6

我想在标题中动态创建操作按钮（操作因组件而异）。这个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次.....依此类推...

为什么？

Answer 1

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

Answer 2

根据此帖子：https://forum.vuejs.org/t/component-not-destroying/25008/10

我必须摧毁“僵尸效应”

gestureRecognizer(_:,shouldRecognizeSimultaneouslyWith:)

为vue组件创建动态事件

2 个答案: