Vue本地储存与自定义事件

一.本地存储

浏览器通过window.sessionStorage和window.loaclStorage实现本地存储，存储大小一般支持5MB左右（不同浏览器大小不同）

相关api

1.xxxxxStorage.setItem('key', 'value')    接受一个键和值作为参数，将键值对添加到储存中

2..xxxxxStorage.getItem('person')   接受一个键作为参数，返回键名对应的值

3.xxxxxStorage.removeItem('key')    接受一个键作为参数，从存储中删除该键名

4.xxxxxStorage.clear()   清空存储中所有的数据

注

1.SessionStorage储存的内容会随着浏览器的窗口关闭而消失

2.LocalStorage储存的内容需要手动清空才会消失

3.getItem（xxx.'value') 如果xxx对应的value获取不到,getItem()返回为null

4.JSON.parse(null) 为null

二.自定义事件

使用场景

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

绑定自定义事件

第一种方式：父组件中<Demo @事件命 = “方法”>

第二种方式：父组件中this,$refs.demo.$on('事件命‘，’方法‘）

<Demo ref = "demo">


mounted(){
  this.$refs.xxx.$on('事件名’，this.test)

注：若只想绑定一次 可以使用once或$once

触发自定义事件

this.$emit('事件名‘，数据）

解除自定义事件

this.$off('事件名’）解除一个自定义事件

this.$off(['事件名‘，’事件名‘]）解除多个自定义事件

this.$off()  解除所有自定义事件

注：

组件可以绑定原生DOM，需要增加native修饰符

通过this.$ref.xxx.$on（’事件名‘，回调）绑定自定义事件时，回调要么在methods中，要么用箭头函数，否则this指向会出问题