Question

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

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

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

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

<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

由于任务，vue不是App.vue的直接子项，您可以使用全局EventBus

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

export const EventBus = new Vue();

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

//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事件

的钩子侦听器

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

` 这是fiddle

Vue.js从位于

1 个答案: