一、webStorage
1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API：
1. xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
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。
localStorage和sessionStorage的区别
1、localStorage：数据存储在localStorage中是永久性的，除非被显式删除，否则数据会一直保留在浏览器中。
sessionStorage：数据存储在sessionStorage中是临时的，当用户关闭浏览器标签页或窗口时，数据会被清除。
2、localStorage：存储在localStorage中的数据在同源的所有窗口中都是共享的，即使是不同的标签页或窗口
也可以访问同一份数据。sessionStorage：存储在sessionStorage中的数据只在同一个标签页或窗口中共享，不同
标签页或窗口之间的数据不互通。
3、localStorage：通常情况下，每个域名的localStorage存储上限为5MB，但具体大小可能会因浏览器而异。
sessionStorage：与localStorage一样，通常情况下，每个域名的sessionStorage存储上限也为5MB，但具体大小
可能会因浏览器而异。
4、localStorage：适合用于长期存储在用户计算机上的数据，比如用户的偏好设置、本地缓存等。
sessionStorage：适合用于临时存储在用户会话期间需要共享的数据，比如表单数据、会话信息等。
二、组件的自定义事件
1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或<Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
3. 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。
4. 触发自定义事件：this.$emit('atguigu',数据)
5. 解绑自定义事件 this.$off('atguigu')
6. 组件上也可以绑定原生DOM事件，需要使用 native 修饰符。
7. 注意：通过 this.$refs.xxx.$on('atguigu',回调) 绑定自定义事件时，回调要么配置在methods中，
要么用箭头函数，否则this指向会出问题！
// 子组件
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>当前求和为：{{number}}</h2>
<button @click="add">点我number++</button>
<button @click="sendStudentlName">把学生名给App</button>
<button @click="unbind">解绑atguigu事件</button>
<button @click="death">销毁当前Student组件的实例(vc)</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
number:0
}
},
methods: {
add(){
console.log('add回调被调用了')
this.number++
},
sendStudentlName(){
//触发Student组件实例身上的atguigu事件
this.$emit('atguigu',this.name,666,888,900)
this.$emit('demo')
this.$emit('click')
},
unbind(){
this.$off('atguigu') //解绑一个自定义事件
this.$off(['atguigu','demo']) //解绑多个自定义事件
this.$off( ) //解绑所有的自定义事件
},
death(){
this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
}
},
}
</script>
// 父组件
<template>
<div class="app">
<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<School :getSchoolName="getSchoolName"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<Student @atguigu="getStudentName" @demo="m1"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
msg:'你好啊！',
studentName:''
}
},
methods: {
getSchoolName(name){
console.log('App收到了学校名：',name)
},
getStudentName(name,...params){
console.log('App收到了学生名：',name,params)
this.studentName = name
},
m1(){
console.log('demo事件被触发了！')
},
show(){
alert(123)
}
},
mounted() {
// App挂载完毕之后，拿到ref为student组件的组件实例对象
this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
},
}
</script>
三、事件总线
1. 一种组件间通信的方式，适用于任意组件间通信。
2. 安装全局事件总线：
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})
3. 使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
2. 提供数据：this.$bus.$emit('xxxx',数据)
4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
