基本概念
组件优势有便于复用, 易于维护，它是一个可复用的 Vue 实例对象，封装了 HTML、CSS、JS
使用步骤
- 1 封装组件，一个vue文件就是一个组件
- 2 引入组件
- 3 注册组件：全局注册“ 在main.js中使用 Vue.component('组件名',组件对象) ”，全局注册的可以在任意地方使用。 局部注册： 在srcipt标签里 引入，和data(){}函数同级下，使用 components属性注册，注册的组件只能在当前组件中使用
- 4 使用组件 <></> 当标签使用即可
- 补充 ： scoped 作用是让 当前样式只在当前组件的template中生效。它的原理是 1 给标签加了 data-v-hash 2 给所有css选择器 加了一个属性选择器
组件通信
- 1 父传子 ： 子组件中 定义props 来接收从父组件传递过来的数据 父组件中在子组件标签上进行数据传递
- 2 子传父： 父组件中 给子组件绑定一个 自定义组件，然后定义一个事件处理函数，子组件在恰当时机，使用this.$emit(‘自定义事件名’，参数，...)触发事件 传递数据。
教科书级别案例
todu案例思路：
- 1 吧数据引入 中间部分的子组件中，用v-for渲染出来
- 2 头部添加功能组件完成
- 3 删除功能完成 直接从中间部分组件里 吧要删除的索引传到 父子间中用 splice方法删除
- 4 底部组件 剩余数量功能完成
- 5 底部组件 全部，已完成，未完成 ， 在子组件中定义一个 变量 预设值为 all，yes，no 分别给三个选项 设置判断 在分别设置点击事件 ，当点击时让变量值等于对应的 预定义值即可 完成样式切换，因为子元素分别绑定了事件，此时可以给父元素绑定'事件委托'吧定义的变量值传到父组件里，父组件接收后定义一个全局变量 吧接收的值赋给全局变量，然后在计算属性（computed）中吧这个全局变量当作依赖项 判断操作即可，最后记得吧之前传值的变量改成 计算属性中函数名哦，完成。(如果此处发现功能无法生效，在没有报错的情况下，极大可能是页面卡住了，可以关闭重新启动，也可以两边分别打印一下传递的值)
- 6 清除已完成功能（注意数据更改覆盖哦） 7 全选反选 子向父传值，并修改，基本数据类型vue不允许这种情况，不过引用数据类型是可以的 完成。
