vue学习简记（七）浏览器本地存储、自定义事件

浏览器本地存储

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()

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

备注：

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

例如将数据存储在本地可以实现刷新页面数据还存在，其实现效果为：

关键代码：

data() {
	return {
		//从本次存储中获取值
		todos:JSON.parse(localStorage.getItem('todos'))||[]
	}
},
watch:{
//深度监视数组内部值的变化，及时修改本地存储的值
	todos:{
		deep:true,
		handler(value){
			localStorage.setItem('todos',JSON.stringify(value))
		}
		
	}
}

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

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

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

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

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

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

5. 解绑自定义事件this.$off('XXX')，解绑多个this.$off(['XXX','YYY'])，解绑所有this.$off()

6. 组件上也可以绑定原生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>