目录
webStorage
1.存储内容大小一般支技5MB左右(不同浏览器可能还不一样)
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存此机制
3.相关API:
- 1. xxxxxStorage.setItem( ' key ', 'value');
- 该方法接受一个键和值作为参数,会把键值对添加到仔伯中,如果键名存在,则更新其对应的值
- 2.xxxxxStorage.getItem( ' person ');
- 该方法接受一个键名作为参数,返回键名对应的值。
- 3.xxxxStorage.removeItem( " key ' );
- 该方法接受一个键名作为参数,并把该键名从存储中删除。
- 4.xxxxxStorage.clear( )
- 该方法会清空存储中的所有数据。
4.备注:
- 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- 2.LocalStorage存储的内容,需要手动清除才会消失。
- 3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getltem的返回值是null
- 4. JSON.parse(null)的结果依然是null。
组件的自定义事件
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)}
<template>
<div class="app">
<h1>{{msg}}学生姓名是:{{name}}</h1>
<!--通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
<School :getSchoolName="getSchoolName" />
<!--通过父组件给子组件绑定一个自定义实现:子给父传递数据 (第一种写法,使用@或v-on)-->
<!--<student v-on:atguigu="getStudentName"/>-->
<!--通过父组件给子组件绑定一个自定义实现:子给父传递数据 (第二种写法,使用ref-->
<Student ref="student" />
</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()
},
getStudentName(name) {
console.log()
this.studentName=name
}
},
mounted() {
this.$refs.student.$on('atguigu', this.getStudentName)//绑定自定义事件
// this.$refs.student.$once('atguigu', this.getStudentName)//绑定自定义事件一次性
},
}
</script>
3.若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
4.触发自定义事件:this.$emit( ' atguigu' ,数据)
5.解绑自定义事件this.$off( ' atguigu ')
<script>
export default {
name: 'Student',
data() {
return {
name: '张三',
sex: "男",
number:0
}
},
methods: {
add(){
this.number++
},
sendStudentName(){
//触发student组件实例身上的atguigu事件
this.$emit('atguigu',this.name)
this.$emit('demo')
},
unbind(){
// this.$off('atguigu')//解绑一个自定义事件
this.$off(['atguigu','demo'])//解绑多个自定义事件
},
death(){
this.$destory()//销毁了当前student组件的实例
}
},
}
</script>
6.组件上也可以绑定原生DOM事件,需要使用native修饰符。
7.注意:通过this.$refs .x.$son( 'atguigu ' ,回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!