江苏龙网

  1. 首页 > 资讯 > 资讯 > >

构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）( 三 )


在这里还需注意的是，在 Vue 示例中，我可以简单地将 $emit 部分写在 @click 侦听器中，如下所示：
这样就能把步骤从 3 步减少到 2 步，选哪个完全取决于个人喜好。简而言之，React 中的子组件可以通过props来访问父函数（前提是你要向下传递 props，这是相当标准的做法，其他 React 工作中也非常常见）；而在 Vue 中，你需要从子级发射事件，这些事件通常会在父组件内部回收。
怎样传递事件侦听器？
React：
针对简单事件（例如单击事件）的事件侦听器很好做。下面是为创建新的 ToDo 项目的按钮创建 click 事件的示例：
这里非常简单，和在一般的 JS 里处理内联 onClick 差不多。如 Vue 部分所述，设置一个事件侦听器来侦听按下 Enter 键的动作有点复杂。这需要由 input 标签处理 onKeyPress 事件，如下：
只要识别出已按下“enter”键，此函数就触发了createNewToDoItem函数，如下：
Vue：
在 Vue 中写起来非常直观。我们只需使用 @符号，后面是我们想要做的事件监听器的类型。例如要添加一个 click 事件监听器，我们可以编写以下代码：
注意：@click 实际上是 v-on:click 的简写。Vue 事件侦听器很好用的是你还可以绑定很多东西，例如.once，它可以防止事件侦听器被多次触发。在编写处理按键的特定事件侦听器时还有许多捷径。我发现在 React 中创建一个事件侦听器，做到每当按下 enter 键就创建新的 ToDo 项目，写起来比较麻烦。在 Vue 中，我只需编写：
如何将数据传递给子组件？
React：
在 React 中，我们将 props 传递到子组件的创建位置。如：
这里我们看到两个传递给ToDoItem组件的 props。从这里开始，我们就可以通过 this.props 在子组件中引用它们。因此要访问 item.todo prop 时，我们只需调用 props.item。你可能已经注意到还有一个 key prop（因此从技术上讲，我们实际上正在传递三个 props）。这主要用于 React 的内部，因为它简化了同一组件的多个版本之间更新和跟踪更改的工作（我们这里每个todo是 ToDoItem 组件的一个副本）。确保你的组件具有唯一键也很重要，否则 React 会在控制台中发出警告。
Vue：
在 Vue 中，我们将 props 传递到子组件的创建位置。如：
完成此操作后，我们将它们传递到子组件的 props 数组中，如下所示：。然后它们就可以在子组件中用名称引用——这里的名称就是 todo。如果你不知道在哪里放 prop 键，下面是我们的子组件中整个 export default 对象的样子：
你可能注意到 Vue 中遍历数据时，我们实际上遍历的是 list 而非 list.value。遍历后者这里是行不通的。
如何将数据发射回父组件？
React：
我们首先将函数向下传递给子组件，在调用子组件的位置将其作为 prop 引用。然后我们向子组件的函数添加调用，比如说onClick就引用props.whateverTheFunctionIsCalled——或者whateverTheFunctionIsCalled（如果用解构）。然后将触发位于父组件中的函数。我们可以在“如何从列表中删除项目”部分中查看全过程。
Vue：
在子组件中，我们只需要编写一个将值返回给父函数的函数即可。在父组件中我们编写一个函数，该函数侦听何时发射出该值，然后可以触发一个函数调用。可以在“如何从列表中删除项目”部分中查看全过程。
终于完成了！
我们已经研究了如何添加、删除和更改数据，以 props 形式将数据从父级传递到子级，以及以事件侦听器的形式将数据从子级发送到父级。当然，React 和 Vue 之间还有其他许多小差异和癖好，但我希望本文的内容有助于大家理解这两个框架是如何处理事物的。
如果你有兴趣 fork 本文中使用的样式，并想制作自己的类似作品，请自便！
两个应用的 Github 链接
Vue ToDo：
https://github.com/sunil-sandhu/vue-todo-2020
React ToDo：
https://github.com/sunil-sandhu/react-todo-2020


推荐阅读


上一篇： 烟头|全县志愿者们在做一件关于“烟头”与文明的大事！

下一篇： 组合|中国女排新组合出炉！李盈莹喊话龚翔宇未获回应，一变化最为明显