1.webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

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

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value');

      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   注意：'value'中必须传字符串，如果是对象必须要通过JSON.stringify()转为字符串，接收的时候JSON.parse转为对象。

   2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

   3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

4. 备注：

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

2.自定义事件实现组件通信

1. 绑定自定义事件：

1. 第一种方式，在父组件中：```<Demo @atguigu="test"/>```  或 ```<Demo v-on:atguigu="test"/>```

2. 第二种方式，在父组件中：

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

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

2. 触发自定义事件：this.$emit('atguigu',数据)

3. 解绑自定义事件this.$off('atguigu')

注意: 不用了就解绑，不然浪费资源

<button @click="unbind">解绑atguigu事件</button>
<button @click="death">销毁当前Student组件的实例(vc)</button>

unbind(){
 	this.$off('atguigu') //解绑一个自定义事件
 	// this.$off(['atguigu','demo']) //解绑多个自定义事件
 	// this.$off() //解绑所有的自定义事件
 },
death(){
 this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
 }

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

5. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

子传父：(@自定义事件)

步骤:

1.在父组件定义取子组件数据的自定义事件@xyz="getSchoolNmae",并去实现这个方法

 <school-z :reviceMessage="reviceMessage" @xyz="getSchoolNmae"/>

 methods:{
   getSchoolNmae(name){
     console.log('父组件收到了子组件信息学校名',name);
     this.name = name ;
   }
 }

2.在定义自定义事件的那个组件里边,绑定单击事件，并且用$emit去调用父组件的自定义事件方法

 <button @click="sendSname">自定义事件把学校名发给父组件</button>

  methods:{
      sendSname(){
      this.$emit('xyz',this.person.name)
   }
  },

自定义事件(ref-->灵活性强，定时器)

步骤

1.在子组件身上绑定ref确保后面通过$refs拿到

 <school-z :reviceMessage="reviceMessage" @xyz="getSchoolNmae" ref="sutdent"/>

 getSchoolNmae(name,...para){
     console.log('父组件收到了学校名',name,para);
     this.name = name ;
   },
 mounted(){
  this.$refs.sutdent.$on('fer',this.getSchoolNmae) 
 },

2.在子组件身上去调用传参

  <button @click="sendSAge">ref把学校年龄发给父组件</button>

  methods:{
   sendSAge(){
       this.$emit('fer',this.person.age)
   }
  },