删除$emit为2级以上或1级以上的todo应用程序中的项目？[副本]

Question

我有3. vue在这里：pp.vue（默认），Todos.vue和Todoitem.vue.我按照教程从https://www.youtube.com/watch?v=Wy9q22isx3U

下面是我的TodoItem.vuecode

<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.vuecode

<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.vuecode

<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>

Answer 1

如果你能提高一级，那就更好了。每个孩子身上都有多个道具可能是一种不好的做法，称为道具钻孔。

Vuex是避免嵌套道具的好选择。