TodoList案例

组件化编写流程

1. 拆分静态组件

• 组件要按照功能点拆分，命名不要与html元素冲突。

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

• 一个组件在用：放在组件自身即可。
• 一些组件在用：放在他们共同的父组件上(状态提升)。

3. 实现交互
   从绑定事件开始。

npm i nanoid

nanoid是单机生成id的一个第三方库。

• 安装：npm i nanoid
• 引入：import {nanoid} from 'nanoid'
• 使用: id:nanoid()

data

如果两个兄弟组件需要共用一个data，就将data定义在app中，再由app.js将数据分贝传给各兄弟组件。

如何将子组件的数据传递给父组件

props适用于:

• 父组件==>子组件通信
• 子组件==>父组件通信（要求父先给子一个函数)：
  在父组件中定义一个函数，含一个参数
  将父组件的函数作为props参数传递给子组件
  子组件接收并调用函数，将自己的data值作为参数传递给父组件传过来的函数即可。
  这样父组件的函数中就可以接收到子组件传过来的值

v-model与props

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

数据在哪，对数据的操作应该就在哪里

TodoList案例实现效果

源码获取：https://github.com/Panyue-genkiyo/vue-advance/tree/master/07_src_Todolist%E6%A1%88%E4%BE%8B