「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例

源码在文末。

前言

上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫。光学不敲等于没学哈(资深大佬除外哈)

目标就是实现如下的样子:

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第1张图片

能够进行增删改查,并且是在各个组件之间。

一、环境准备

针对这个页面,我们将他们划分为下面四个组件哈。其实也不是固定的,只是为了更好的展示组件之间的通信。

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第2张图片

项目结构:

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第3张图片

准备静态页面

MyTodoHeader头部组件:




MyTodoList组件,另外组件内还包含着MyTodoItem组件




MyTodoItem组件




MyTodoFooter组件




/*footer*/

App组件





二、在头部组件中实现增加方法

首先说说我们的需求:

就是在头部组件中的输入框中进行输入,然后按下回车键就将数据增加到todos数组中,并在下面的列表中展示出来。

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第4张图片

思路大致如下:

  1. 首先我们要明确数据我们是存储在App组件中的,那么我们真实修改的方法也应该写在App组件中。由App组件将方法传递给子组件(MyTodoHead)组件。
  2. 在子组件中通过Props进行接收
  3. 最后再在子组件的input中定义一个回车事件,触发父组件中的增加方法,进行数据的更新。

App组件中修改:


我们通过:addTodo="addTodo"传递给子组件一个方法,然后在子组件中我们用props来接收。


这里我使用到了uuid生成全局唯一id。

安装方式:

npm install uuid --save
# 引用的话直接
import { v4 as uuidv4 } from 'uuid';
# 用法: 直接调用这个函数即可
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

三、完善 MyTodoList 组件 | 根据id删除一条todo&判断是否选中

先说说需求:

  1. 鼠标经过每个todo上显示删除按钮,可以点击删除
  2. 判断是否勾选,即判断是否已完成

其实还有第三个的哈,我没写了(懒了),第三个是编辑,大家可以试一试.

如下图:

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第5张图片

思路其实蛮简单的哈:

  1. 点击删除,只要传个id即可,虽然是祖孙组件之间传值,但其实就是将方法传了两层,借助了List组件做个中介,接收完再传递给item组件而已
  2. 判断是否已完成也一样,都是借助了list组件传递,实现祖孙组件通信.

MyTodoList组件


MyTodoItem组件



App组件见下文哈

四、完善尾部组件 | 判断是否全部勾选及清除全部已完成任务

照常先谈谈我们的需求:

1、判断是否全部勾选,修改数据状态。

2、清除选中的任务

3、当没有任何数据时,底部栏不展示

「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例_第6张图片


先讲讲第一个的思路:判断有没有全选,其实就是判断todos数组的长度是否等于已经选中的数量(另外就是注意就是数组长度必须要大于零)

第二个:清除选中的任务,其实就是根据id 删除掉 App父组件中 todos中我们选中的数据。

第三个:使用v-show指令即可,直接用todos数组的长度即可,当数组长度为0时,v-show自然为”false“,反之为true

理清楚,直接看代码哈



为什么不选择通过dom元素来判断有没有进行勾选呢?

Vue框架中并不建议我们直接操作Dom元素,更多的是希望我们通过vue框架自带的方式来实现.

App组件:


五 小结

vue中组件通信的方式其实有很多种,就像我已经学过的就有props | emit | 全局事件主线 | 发布订阅模式

之后还有Vuex,另外我们还可以自己定制.还有蛮多我没学到的 捂脸

其实本质都是去做数据的共享,大都数情况都是根据实际情况来选择的,并非那一样就是最好的。

六 源码

gitee

github

后语

大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。

纸上得来终觉浅,绝知此事要躬行。

大家好,我是博主宁在春:[主页]https://segmentfault.com/u/wy...)

一名喜欢文艺却踏上编程这条道路的小青年。

希望:我们,待别日相见时,都已有所成。L

你可能感兴趣的:(「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例)