javascript - Vue.js 从插槽内的孙子传递事件

Question

我刚开始学习 Vue，在通过不同组件传递事件时遇到了一些问题。我正在构建一个简单的待办事项列表应用程序，它具有添加和删除新任务等基本功能。这是 repo 协议(protocol)的链接 https://github.com/Polenj86/vue-taskmanager .

我的应用程序的树结构是:

-root //App.vue
-- childcomponent // NewTask.vue
-- childcomponent // TasksWrapper.vue
   -- grandchildcomponent //Task.vue

我想要实现的是为 Task.vue 提供一个按钮，让我从根目录中的任务数组中删除一个任务。到目前为止，我只能通过使用此方法单击整个元素来删除任务:

<app-component @click.native="deleteTask"></app-component>

methods: {
  deleteTask(index) {
    this.tasks.splice(index, 1)
  }
}

我想要的是将此方法提供给组件内部的按钮，而不是整个组件。

这是孙代代码:

<template lang="pug">
.panel.panel-default
    .panel-body
        slot(name="task-content")
    .panel-footer
        button.btn.btn-sm.btn-primary(@click="deleteTask") Delete task

</template>    

如何通知 root 我想删除它？我尝试使用事件发射器，但我不知道应该将什么作为第二个参数传递给发射器。

export default {    
    methods: {
        deleteTask() {
            this.$emit('taskWasDeleted', ???);
        }
    }
}

感谢帮助

Answer 1

由于 Task,vue 不是 App.vue 的直接子级，您可以使用全局 EventBus

在你的 main.js 文件中创建一个空的 Vue 实例作为中央事件总线:

export const EventBus = new Vue();

现在将 v-for 中的索引作为 prop 传递给 Task.vue 组件

//grandChild component or Task.vue
<app-component :taskIndex="index" :key="index"></app-component>

在您的 Task.vue 中发出一个事件，将索引作为您作为 Prop 接收的第二个参数传递

<template lang="pug">
.panel.panel-default
    .panel-body
        slot(name="task-content")
    .panel-footer
        button.btn.btn-sm.btn-primary(@click="deleteTask") Delete task

</template>  

import {EventBus} from './main.js'
export default {    
    proos: ['tabIndex'],
    methods: {
        deleteTask() {
            EventBus.$emit('deleteTask', this.tabIndex);
        }
    }
} 

现在在 App.vue 中为 deleteTask 事件创建的钩子(Hook) listeb

//App.vue
<script>
import {EventBus} from './main.js'
export default{
    created(){
        EventBus.$on('deleteTask', (taskIndex) => {
            this.tasks.splice(taskIndex, 1)
        });
    }
}
</script> 

`这是 fiddle