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

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

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

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

我试图实现的是为Task.vue提供一个按钮，使我能够从根目录中的tasks数组中删除任务。 到目前为止，我仅通过使用以下方法单击整个元素来删除任务：

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

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

---

感谢您的帮助

因为任务完成，vue不是App.vue的直接子项。您可以使用全局

在main.js文件中，创建一个空的Vue实例作为中心事件总线：

export const EventBus = new Vue();

现在将索引从

v-for

作为道具传递到Task.vue组件

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

<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);
        }
    }
} 

`

---

这是

Vamsi谢谢，它像一个魔咒一样工作，我缺少的是传递给grandchild@NesSuno这是供参考的fiddle（），不要忘记在迭代元素上添加

：key='index'

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

<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
<script>
import {EventBus} from './main.js'
export default{
    created(){
        EventBus.$on('deleteTask', (taskIndex) => {
            this.tasks.splice(taskIndex, 1)
        });
    }
}
</script>