<button class="ToDo-Add" @click="createNewToDoItem"> +</button>
留意：@click实践上是编写v-on：click的简写。 Vue事情侦听器很酷的事情是，您还可以绑定很多东西，例如.once，它可以避免事情侦听器被屡次触发。 在编写用于处置按键的特定事情侦听器时，还有许多捷径。 我发现，每当按下Enter键时，在React中创立一个事情侦听器以创立新的ToDo项就破费了相当长的时间。 在Vue中，我可以复杂地编写：
<input type="text" v-on:keyup.enter="createNewToDoItem"/>
我们如何将数据传递给子组件？ 反响：在react中，我们将道具传递到子组件的创立位置。 如：
<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />;
在这里，我们看到两个传递给ToDoItem组件的道具。 从如今末尾，我们如今可以经过this.props在子组件中援用它们。 因此，要拜访item.todo prop，我们只需调用props.item。 您能够曾经留意到，还有一个关键道具（因此从技术上讲，我们实践上正在传递三个道具）。 这主要用于React的外部，由于它使在同一组件的多个版本之间停止更新和跟踪更改动得容易（我们在这里拥有它，由于每个todo是ToDoItem组件的一个正本）。 确保您的组件具有独一键也很重要，否则React会在控制台中正告您。
Vue：在Vue中，我们将道具传递到子组件的创立位置。 如：
<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" />
完成此操作后，我们将它们传递到子组件的props数组中，如下所示：props：[" todo"]。 然后可以经过子组件的名字在子组件中援用这些名字，因此在我们的案例中是todo。 假设您不确定该prop键的放置位置，则这是整个导出默许对象在子组件中的外观：
export default {
name: "ToDoItem", props: ["item"], setup(props, { emit }) {
function deleteItem(id) {
emit("delete", id);
}
return { deleteItem, };
},
};
您能够曾经留意到的一件事是，当在Vue中遍历数据时，我们实践上只是遍历了list而不是list.value。 尝试遍历list.value在这里行不通
我们如何将数据发送回父组件？ React：首先，经过在调用子组件的中央将其作为道具援用，将函数传递给子组件。 然后，经过援用props.whateverTheFunctionIsCalled（假设运用了解构）或whatTheFunctionIsCalled，可以经过诸如onClick之类的任何方式在子元素上添加对函数的调用。 然后，这将触发位于父组件中的函数。 我们可以在"我们如何从列表中删除"部分中看到整个进程的示例。
Vue：在子组件中，我们只编写了一个将值前往给父函数的函数。 在父组件中，我们编写了一个函数，该函数侦听何时收回该值，然后可以触发函数调用。 我们可以在"我们如何从列表中删除"部分中看到整个进程的示例。
我们终于失掉它了！我们曾经研讨了如何添加，删除和更改数据，以道具方式将数据从父级传递到子级，以及以事情侦听器的方式将数据从子级发送到父级。 当然，React和Vue之间还有许多其他的小差异和怪异之处，但是希望本文的内容有助于为了解这两个框架如何处置事物奠定基础。
假设您有兴味分叉本文中运用的样式，并想制造本人的同等作品，请随时这样做！
Github链接到两个运用顺序：Vue待办事项：https://github.com/sunil-sandhu/vue-todo-2020
React待办事项：https://github.com/sunil-sandhu/react-todo-2020
最后发布于：sunilsandhu.com
【编辑引荐】
SpringBoot Web 运用源码解析：综合实战和全体总结
面向深度学习的五大神经网络模型及其运用
(责任编辑：admin)