浏览器本地存储
-
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
-
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
-
相关API:
-
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 -
xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
-
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
-
xxxxxStorage.clear()
该方法会清空存储中的所有数据。
-
备注:
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容,需要手动清除才会消失。
xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。JSON.parse(null)
的结果依然是null。
例如将数据存储在本地可以实现刷新页面数据还存在,其实现效果为:
关键代码:
data() {
return {
//从本次存储中获取值
todos:JSON.parse(localStorage.getItem('todos'))||[]
}
},
watch:{
//深度监视数组内部值的变化,及时修改本地存储的值
todos:{
deep:true,
handler(value){
localStorage.setItem('todos',JSON.stringify(value))
}
}
}
组件的自定义事件
-
一种组件间通信的方式,适用于:子组件 ===> 父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
-
绑定自定义事件:
-
第一种方式,在父组件中:
<Demo @XXX="test"/>
或<Demo v-on:XXX="test"/>
-
第二种方式,在父组件中:
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('XXX',this.test) }
-
若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法。
-
-
触发自定义事件:
this.$emit('XXX',数据)
-
解绑自定义事件
this.$off('XXX')
,解绑多个this.$off(['XXX','YYY'])
,解绑所有this.$off()
-
组件上也可以绑定原生DOM事件,需要使用
native
修饰符。
注意:通过
this.$refs.xxx.$on('atguigu',回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
实现以下效果
Friends.vue
<template>
<div class="student">
<h2>姓名:{{name}}</h2>
<h2>性别:{{sex}}</h2>
<button @click="sendFriendsName">把Friends名给App</button>
<button @click="unbind">解绑事件</button>
</div>
</template>
<script>
export default {
name:'Friends',
data() {
return {
name:'张三',
sex:'男',
}
},
methods: {
sendFriendsName(){
//触发Friends组件实例身上的getFriendsName事件,将name作为参数传进去
this.$emit('getName',this.name,1,2,3)
},
unbind(){
this.$off('getName')
}
},
}
</script>
<style scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
People.vue
<template>
<div class="people">
<h2>姓名:{{name}}</h2>
<h2>住址:{{address}}</h2>
<button @click="sendPeopleName">把姓名给App</button>
</div>
</template>
<script>
export default {
name:'People',
props:['getPeopleName'],
data() {
return {
name:'刘一',
address:'北京',
}
},
methods: {
sendPeopleName(){
this.getPeopleName(this.name)
}
},
}
</script>
<style scoped>
.people{
background-color: skyblue;
padding: 5px;
}
</style>
App.vue
<template>
<div class="app">
<h1>{{msg}}</h1>
//<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
//<People :getPeopleName="getPeopleName"></People>
//<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->
//<!-- <Friends @getName="getFriendsName"></Friends> -->
//<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) -->
<Friends ref="friends" />
</div>
</template>
<script>
import People from './components/People'
import Friends from './components/Friends.vue'
export default {
name:'App',
components:{ People, Friends },
data() {
return {
msg:'你好啊!'
}
},
methods: {
getPeopleName(name){
console.log('APP收到了People的名字',name)
},
getFriendsName(name,...params){
console.log('APP收到了Friends的名字',name,params)
}
},
mounted(){
//这里的$on的作用就是把getName的事件添加到friends的vc上,所以Friends组件才能$emit调用
this.$refs.friends.$on('getName',this.getFriendsName)
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>