携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天点击查看活动详情。

组件的自定义事件

1、一种组件间通信的方式，适用于：子组件 === > 父组件

2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件 (事件的回调在 A 中)

3、子组件中：<Demo @atguigu="test" @demo="m1" /> 或者 <Demo v-on：atguigu="test" />
第二种方式，在父组件中：

<Demo ref="demo" />
......
mounted() {
 this.$refs.xxx.$on("atguigu", this.test);
 },

若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法

4、触发自定义事件：this.$emit("demo"，数据);

5、解绑自定义事件：this.$off("atguigu"); // 解绑一个自定义事件

6、组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符

7、注意：

通过 `this.$refs.xxx.$on("atguigu", 回调)`  
绑定自定义事件时，回调函数要么配置在 `methods` 中，要么使用箭头函数。否则this指向会出错

父组件可以使用 props 把数据传给子组件；子组件可以使用 $emit 触发父组件的自定义事件
子组件在传值的时候，选用 input，如 this.$emit('input', value), 在父组件中直接用 v-model 绑定，就可以获取到。
子组件也可以通过 $emit(‘input’,false)，去改变父组件中 v-model和 子组件中value的值 。

浏览器本地存储

webStorage： localStorage 和 sessionStorage 统称为 webStorage

1、存储内容大小一般支持 5MB 左右(不同浏览器可能不同)

2、浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性实现本地存储机制

3、相关 API：setItem、getItem、removeItem、clear

xxxxxStorage.setItem('msg', 'hello!');
<!-- 该方法接受一个键和值作为参数，会把键值对添加到存储中，若键名存在，则更新其对应的值 -->
xxxxxStorage.getItem('person');
<!-- 该方法接受一个键名作为参数，返回键名对应的值 -->
xxxxxStorage.removeItem('key');
<!-- 该方法接受一个键名作为参数，并把键名从存储中删除 -->
xxxxxStorage.clear();
<!-- 该方法会清空存储中所有数据 -->

4、备注：

1. SessionStorage 存储的内容会随着浏览器窗口的关闭而消失。
2. LocalStorage 存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem('key','value'); 如果 xxxx 对应的 value 获取不到，那么 getItem 返回值为 null。
4. JSON.parse(null) 返回的结果依然是 null。