11.5 Vue day06 父子组件通信、自定义事件

props父子通信

props （写在子组件）通过父组件给子组件传递函数类型的props实现：子给父传递数据

子传父 1.父组件定义一个方法，再通过子组件标签通知子组件，

2.子组件props，然后再使用该方法，通过该方法的参数通知父组件

子传父图

注意数据在哪个组件，在那里修改数据

总结TodoList案例

组件化编码流程：

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

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

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

2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

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

(2).子组件 ==> 父组件通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

localStorage方法

1.window.localStorage.setItem("key","value")

2.window.localStorage.getItem("key")

3.window.localStorage.removeItem("key")

4.window.localStorage.clear()

sessionStorage方法与localStorage一样，当关闭浏览器会清空

自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

自定义事件子组件传递父组件数据方法1

1）父组件中在School标签绑定atguigu事件，该事件绑定回调函数getSchoolName

2）在父组件中定义好回调函数

3）子组件School定义触发函数

4）子组件中让该函数触发事件（atguigu）

自定义事件子组件传递父组件数据方法2

1）父组件中的子组件标签定义ref属性“getSchool”

2）在挂载函数通过refs方法把atguigu挂载在School的vc上，并定义回调函数

3）子组件School定义触发函数并通过触发函数触发atguigu事件