Vue从入门到精通——第三章（中）Todo-list案例

1.实现静态组件

1.1确定目录结构

1.2在components中创建4个文件，并设置基本结构

• MyHeader基本结构：
  
• 在App.vue中导入组件
  

1.3导入结构及样式

2.展示动态数据

2.1初始化列表

1. 创建数据

2. 遍历及传出数据

3. 接收及展示数据

2.2添加数据

1. 在MyHeader中添加点击事件

2. MyHeader与MyList是兄弟无法传输数据
解决：将MyList中列表数据放到App.vue中，利用子>>父>>子的模式传输数据

• 将列表数据放到App.vue中，并创建一个函数用于让子传数据给父
  
• 将列表内容传给子组件MyList,并将函数传给子组件MyHeader
  
• MyHeader接受App.vue传来的函数，并将输入的内容通过函数传递给App.vue
  

3.实现交互功能

3.1实现勾选功能

1. App.vue中创建一个函数，实现更改done值，并将函数通过爷>>父>>子的方式传给MyItem.vue

传递函数给子组件，再通过子组件传给子组件：

2. MyItem接受函数，并将id传给函数

3. 勾选功能实现

3.2实现删除功能

1. 在App.vue中添加删除函数

2. App.vue中创建一个函数，实现更改done值，并将函数通过爷>>父>>子的方式传给MyItem.vue
3. 在MyItem.vue创建函数获取点击的id，并将id传给deleteTodo函数


4. 完成删除功能

3.3底部统计

1. 将数组传给MyFooter

2. 数组长度作为全部值

3. 在MyFooter的计算属性中编写计算已完成值函数（三种写法）

  computed: {
    
    
    //遍历写法
    doneTotal() {
    
    
      //1.遍历写法
      let i = 0
      this.todos.forEach((todo) => {
    
    
        if(todo.done) i++
      });
      return i
      // 2.reduce正常写法
      const x = this.todos.reduce((pre,current)=>{
    
    
        return pre + (current.done ? 1 : 0)
      },0)
      return x
      //3.reduce简写
      return this.todos.reduce((pre,current)=> pre +(current.done ? 1 : 0),0)
    },
  }

4. 完成底部统计功能

3.4全选与清除已完成功能

1. 全选按钮

• 在App.vue中创建全选/取消全选函数
  
• 将函数传给MyFooter.vue
• 在按钮上添加点击函数，将checked值传给clearAllTodo()函数，全选功能完成
  

2. 清除已完成按钮

• 在App.vue中创建清除已完成的函数
  
• 将函数传给MyFooter.vue
  
• 接受函数，并在按钮上添加点击函数，执行clearAllTodo()函数，清除功能完成
  

4.总结

1. 组件化编码流程：

​	(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

​	(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

​			1).一个组件在用：放在组件自身即可。

​			2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

​	(3).实现交互：从绑定事件开始。

2. props适用于：

​	(1).父组件 ==> 子组件 通信

​	(2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。