使用 $emit 2 级或 1 级删除待办事项应用程序的项目？ [复制]

Posted 2023-02-22

【中文标题】使用 $emit 2 级或 1 级删除待办事项应用程序的项目？ [复制]

【英文标题】：Delete item for todo app in with $emit 2 level up or 1 level up? [duplicate]

【发布时间】：2020-09-20 08:44:54

【问题描述】：

我这里有 3 个 .vue：App.vue（默认）、Todos.vue 和 Todoitem.vue。我正在关注https://www.youtube.com/watch?v=Wy9q22isx3U&t=2458 的教程。可以知道为什么 TodoItem.vue 中的作者发出 id 到 App.vue 两级来执行删除的方法吗？它是最佳实践还是更好的编码风格？让 Todos.vue 做同样的事情更容易上一层吗？以下是我对任何评论的一种升级方法。

下面是我的TodoItem.vue代码

<template>
  <div class="todo-item" v-bind:class="'is-complete':todoObj.completed">
    <p>
      <input type="checkbox" v-on:change="markComplete" />
      todoObj.title
      <button @click="$emit('del-todo',todoObj.id)" class="del">x</button>
    </p>
  </div>
</template>

<script>
export default 
  name: "TodoItem",
  props: ["todoObj"], // todoObj is defined in the parent.
  methods: 
    markComplete() 
      this.todoObj.completed = !this.todoObj.completed;
    
  
;
</script>

<style scoped>
.todo-item 
  background: #f4f4f4;
  padding: 10px;
  border-bottom: 1px #ccc dotted;


.is-complete 
  text-decoration: line-through;


.del 
  background: #ff0000;
  color: #fff;
  border: none;
  padding: 5px 9px;
  border-radius: 50%;
  cursor: pointer;
  float: right;

</style>

下面是我的Todo.vue 代码

<template>
  <div>
    <h1>Todo List2</h1>
    <!-- :key= and v-bind:key= are exactly the same. -->
    <!-- v-bind. Shorthand: : -->
    <div v-for="todo in ptodos" :key="todo.id">
      <!-- Define todoObj here which to be used in the child component, TodoItem -->
      <MyTodoItem v-bind:todoObj="todo" v-on:del-todo="deleteTodo" />
      <!-- del-todo is from the child. child goes up to parent and then to grandparent (App.vue) -->
    </div>
  </div>
</template>

<script>
import MyTodoItem from "./TodoItem.vue";

export default 
  name: "Todos",
  components: 
    MyTodoItem
  ,
  props: ["ptodos"],

  methods: 
    deleteTodo(id) 
      this.ptodos = this.ptodos.filter(todo => todo.id !== id);
    
  
;
</script>

<style scoped>
</style>

下面是我的App.vue代码

<template>
  <MyToDos v-bind:ptodos="todos" />
</template>

<script>
import MyToDos from "./components/Todos";

export default 
  name: "App",
  components:  MyToDos ,
  data() 
    return 
      todos: [
        
          id: 1,
          title: "Todo One",
          completed: false
        ,
        
          id: 2,
          title: "Todo Two",
          completed: true
        ,
        
          id: 3,
          title: "Todo Three",
          completed: false
        
      ]
    ;
  
;
</script>

<style>
* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;


body 
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;

</style>

【问题讨论】：

简单...您不应该修改道具值。实际上，您的控制台中应该会显示警告

【参考方案1】：

如果你能做到这一点，那就更好了。每个孩子都有多个道具可能是一种不好的做法，称为prop drilling。

Vuex 是避免嵌套 props 的好方法。

【讨论】：

你说这是一个“不好的做法”，但链接到一篇文章的标题为"Why is prop drilling good?"?