1. Vue组件化编码流程：
1.1 拆分静态组件：组件要按功能拆分，命名不能与html元素冲突
1.2 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
（1）一个组件在用：放在组件自身即可。
（2）一些组件在用：放在他们共同的父组件上（状态提升）
1.3 实现交互，从绑定事件开始
2. 父子组件传值
2.1. 父组件给子组件传值： 给子组件绑定属性或事件，子组件用props接收
// toDoList为父组件传递给子组件的数组，供子组件使用
<my-list :todolist="toDoList" :deleteTodo="deleteTodo"/>
2.2. props适用于：
2.1 父组件 => 子组件 通信
2.2 子组件 => 父组件 通信（要求父组件先给子组件一个函数）
2.3. 使用v-model要切记：v-model绑定的值不能是props传过来的值，因为props的值是不可以修改的
2.4. props传过来的值若是对象类型的值，修改对象中的属性时vue不会报错，但是不推荐这样做
2.5. 子组件给父组件传值的方式：
```
1 通过父组件给子组件传递函数类型的props实现：
// deleteTodo为一个函数，定义在使用my-list的组件（父组件）中，同时给my-list绑定了deleteTodo事件，在my-list中需要用props接收，并在需要使用的地方调用，触发父组件中的逻辑
<my-list :todolist="toDoList" :deleteTodo="deleteTodo"/>
```
2 通过父组件给子组件绑定一个自定义事件实现
```
// 绑定事件的两种形式：ref 或者 @(v-on)
// 1. 用@(v-on)给子组件绑定一个自定义事件addTodo事件
<my-header @addTodo="addTodo" />
// 2. 用ref给子组件绑定一个自定义事件addTodo事件
// 添加引用
<my-header ref='header' />
// 绑定事件
this.$refs.header.$on('addTodo', this.addTodo)
// 子组件需要用$emit方法触发自定义事件
// $emit函数的参数：第一个参数是函数名，后边可以追加很多参数，一次接收：getName(a,b,c)，或者以数组形式接收：getName(...para),para接收数组类型数据
this.$emit('addTodo', todoObj)
```
注意，若果想让自定义事件只触发一次，可以使用once修饰符或$once方法
```
// 只触发一次
// 1. once
<my-header @addTodo.once="addTodo" />
// 2. $once
this.$refs.footer.$once('clearDone', this.clearDone)
```
2.6. 自定义事件的原生事件调用:
组件中的事件默认都是自定义事件，需要用$emit触发，如果想使用原生事件，需要用native关键字，且该自定义事件绑定在template的根元素上
<!-- 使用native关键字声明使用的click事件是原生事件-->
<my-header @addTodo="addTodo" @click.native="showMsg"/>
2.7. 自定义事件的解绑
// 解绑一个事件
this.$off('addTodo')
// 解绑多个事件
this.$off(['addTodo'])
// 解绑所有事件
this.$off()
