javascript - 在 Vue 中删除一个对象，从子对象发射到父对象，再到父对象

Question

我在 VUE 中创建了一个简单易用的应用程序。

为了删除一张卡片(每张卡片都是一个对象，在 App.vue 组件的状态中有一个 id、标题和描述)，我将 App 中的 id 作为 Prop 传递给 TaskList 和按钮(删除)在任务组件中。然后为了触发 deleteTask 函数，我再次将一个 id 从 Task 发送到 TaskList，然后发送到 App。

这种方法行得通。然而，这种长链发射被认为是好的做法吗？有更好的方法吗？

App.vue

<template>
  <div>
    <TaskList :tasks="tasks" @id="deleteTask"/>
    <Form :length="tasks.length" @addTask="addNewTask" />
  </div>
</template>

<script>

import TaskList from './components/TaskList';
import Form from './components/Form';

export default {
  name: 'App',
  components: { TaskList, Form },
      data() {
        return {
            tasks: [
                {
                    id: 1,
                    title: 'Hello World',
                    description: 'this is the world'
                },
                {
                    id: 2,
                    title: 'Hello Mars',
                    description: 'this is the mars'
                },
                {
                    id: 3,
                    title: 'Hello Jupiter',
                    description: 'this is the jupiter'
                }
            ]
        }
    },
    methods: {
      addNewTask(taskObject) {
        const listOfTasks = this.tasks.concat(taskObject);
        this.tasks = listOfTasks;
      },
      deleteTask(id) {
        const filteredList = this.tasks.filter(element => {
          return element.id != id;
        })
        this.tasks = filteredList;
      }
    }
}
</script>

任务列表.vue

<template>
  <div class="taskList" v-bind:key="task" v-for="task in tasks">
      <Task :title="task.title" :description="task.description" :id="task.id" @id="sendId"/>
  </div>
</template>

<script>

import Task from './Task';

export default {
    props: ['tasks'],
    components: { Task },
    methods: {
      sendId(id) {
        this.$emit('id', id);
        console.log(id)
      }
    }
}

</script>

任务.vue

<template>
  <div class="task">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="passId">Delete</button>
  </div>
</template>

<script>
export default {
    props: ['title', 'description', 'id'],
    methods: {
        passId() {
            this.$emit('id', this.id);
        }
    }
}
</script>

Answer 1

减少这种数据传输链的一种可靠方法是使用 Vuex，但是如果您不想使用它，您也可以使用“EventBus”

注意 - 您仍然必须将 id 从父级传递给子级

• 创建事件总线

// src > eventBus.js

import Vue from 'vue'
export default new Vue()

• 当用户点击删除按钮时触发事件

// Task.vue
<template>
  <div class="task">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="passId">Delete</button>
  </div>
</template>

<script>
import EventBus from 'path/to/eventBus'

export default {
    props: ['title', 'description', 'id'],
    methods: {
        passId() {
            EventBus.$emit('delete-task', this.id);
        }
    }
}
</script>

• 监听最顶层父级的事件

<template>
  <div>
    <TaskList :tasks="tasks" @id="deleteTask"/>
    <Form :length="tasks.length" @addTask="addNewTask" />
  </div>
</template>

<script>

import TaskList from './components/TaskList';
import Form from './components/Form';
import EventBus from 'path/to/eventBus.js'

export default {
  name: 'App',
  components: { TaskList, Form },
      data() {
        return {
            tasks: [
                {
                    id: 1,
                    title: 'Hello World',
                    description: 'this is the world'
                },
                {
                    id: 2,
                    title: 'Hello Mars',
                    description: 'this is the mars'
                },
                {
                    id: 3,
                    title: 'Hello Jupiter',
                    description: 'this is the jupiter'
                }
            ]
        }
    },
    mounted(){
      // Listening to the delete-task event
      EventBus.$on('delete-task', (id) => {
        this.deleteTask(id)
      })
    },
    methods: {
      addNewTask(taskObject) {
        const listOfTasks = this.tasks.concat(taskObject);
        this.tasks = listOfTasks;
      },
      deleteTask(id) {
        const filteredList = this.tasks.filter(element => {
          return element.id != id;
        })
        this.tasks = filteredList;
      }
    }
}
</script>