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

Question

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

为了删除一张卡片（每张卡片都是一个带有 ID、标题和描述的对象，位于 App.vue 组件的状态中），我将 App 中的 ID 作为道具传递给 TaskList 和按钮（删除）任务组件。然后为了触发deleteTask函数，我再次将一个ID从Task发送到TaskList，然后发送到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>

标签： javascriptvue.jsvuejs3

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>