【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用

文章目录

一、本地存储
- 1.概念
- 2.接口
- 3.实际操作
二、自定义事件绑定
- 1.自定义事件使用过程
- 2.绑定自定义事件的语法
- 3.其他注意事项
三、全局事件总线
- 1.全局事件总线概念
- 2.全局事件总线的使用方式
- 3.原理剖析
四、$nextTick小技巧

一、本地存储

1.概念

可以将数据临时存储到本地浏览器，一般大小最大为5M，存储的时候形式是字符串，早期可以做网站搜索记录的存储，随着云原生的不断发展，搜索记录，浏览记录不断转向了云端存储方式。

分类：

永久存储使用localStorage
临时存储使用sessionStorage

2.接口

（上面两种存储方式接口名称一样）：

window.localStorage.setItem() 存数据，传入的应是一个JSON串
window.localStorage.getItem() 获取数据。接受到后应进行解析，为防止没有数据应加一个|| “”
window.localStorage.removeItem() 删除数据。传入的是一个键
window.localStorage.clear()

读取与写入的时候可以使用JSON进行解析，写入的时候如果不解析，会导致存储异常
读取的时候不解析，读到的将是一个字符串。JSON解析null结果还是null

JSON.stringify()
JSON.parse()

存储的时候使用的是键值对的形式，对一个键进行多次存储以最后一次为准

3.实际操作

<script>//存数据function addStorage(){localStorage.setItem("users",JSON.stringify([{"name":"张三","age":"18"},{"name":"张三1","age":"188"}]))}//取数据function alertStorage(){let i=JSON.parse(localStorage.getItem("users"))console.log(i)}//删除数据function delStorage(){localStorage.removeItem("users")}//清空数据function delAllStorage(){localStorage.clear()}
</script>

如图所示（存储的一条用户数据）：

二、自定义事件绑定

这种方法信息流向为子组件===>父组件

1.自定义事件使用过程

进行事件的绑定

使用$emit触发事件（可以对$emit传多个参数，能接受几个看绑定的回调函数）

2.绑定自定义事件的语法

方法① 直接使用v-on:事件名=“回调函数”或者@+事件名+“回调函数”（事件名与回调函数名可以一样）
方法② 通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！（ref在父组件的标签上）
一般事件绑定与解除使用时机如下：
- mounted函数中进行事件绑定
- beforeDestroy函数中进行事件的解除

mounted(){this.$bus.$on("alertDone",this.alertDone)
},
beforeDestroy(){this.$bus.$off("alertDone")
}

3.其他注意事项

在组件中没办法直接使用系统给定的事件，例如@click他会当做一个自定义事件处理，想要作为系统自带的事件需要使用@click.native，其余系统自带属性亦是如此。
如果想让事件只触发一次，就需要使用once或$once进行修饰
触发自定义事件，需要使用$emit(“事件名”,事件需要的参数)
解绑事件使用$off(“事件名”)
事件回调函数可以使用省略传参方式进行传参

结合一个实例看看如何使用：
以下实例实现了将子组件的数据传送到父组件，传送之后并重新渲染模板，只给出了核心代码注释。
App.vue 父组件

<template>
<div class="demo"><!-- 第一种测试方式 ref--><h3>这里是父组件，子组件传过来的数据为：{{schname}}</h3><School ref="school"></School><!-- 第二种测试方式 @ or v-on --><h3>这里是父组件，子组件传过来的数据为：{{stuname}}</h3><Student @getstuname="getstuname"></Student><h3>以下组件只会触发一次事件，因为使用了once属性</h3><Student @getstuname.once="getstuname"></Student>
</div>
</template><script>
import Student from "./components/Student.vue"
import School from "./components/School.vue"
export default {name:"App",components:{Student,School},data(){return{stuname:"",schname:""}},methods:{//回调函数getstuname(name){this.stuname=nameconsole.log(name)},getschname(name){this.schname=nameconsole.log(name)}},mounted(){// 第二种进行事件的绑定的方法（将事件名与回调函数绑定起来）this.$refs.school.$on("getschname",this.getschname)}
}
</script><style>.demo{background-color:grey;}
</style>

School.vue子组件

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="sendschoolname">点我给把学校名给App</button></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname:"School",data(){return {name:"南阳理工学院",address:"长江路80号"}},methods:{sendschoolname(){//触发事件，并传递参数this.$emit("getschname",this.name)}}
}
</script><style scoped>
.demo{background-color: #ddd;}
</style>

Student.vue子组件

<template><div class="demo"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="sendstuname">点我发送学生姓名给App</button></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname:"Student",data(){return {name:"张三",age:18}},methods:{sendstuname(){//触发事件，并传递参数this.$emit("getstuname",this.name)}}
}
</script><style scoped>
.demo{background-color: #ddd;
}
</style>

三、全局事件总线

可用于父子、兄弟之间等等任意组件间相互通信

1.全局事件总线概念

全局事件总线可以用于同一层的组件进行通信

全局事件总线利用的是vue运行底层原理（在自己身上找不到数据是向上级找，直到原型）

在使用全局事件总线的时候需要先定义（安装），安装的时机是在vm对象创建但数据代理等没有创建之前。

使用事件总线的时候需要先明白哪里接受数据，哪里发送数据

接受数据的地方绑定事件，发送数据的地方触发事件，绑定事件一般写在就是mounted函数内

在销毁对象的时候最好将之前绑定的事件解绑掉，解绑的时候还是用$off()

通俗点来说，全局事件总线就像一个公交车或者说邮差，游走在兄弟组件、父子组件、不相关组件之间，虽然组件之间相互不知道有什么，但可以将信息传递到很远的地方，原因就是在Vue原型对象上挂载了一个全局变量，大家都知道有这么一个东西的存在。

2.全局事件总线的使用方式

安装全局事件总线

new Vue({......beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},......
})

使用全局事件总线

接受数据（绑定事件）：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){demo(data){......}
}
......
mounted() {
//第一个参数是事件名，第二个参数是回调函数this.$bus.$on('xxxx',this.demo)
}

发送数据（触发事件）

this.$bus.$emit('xxxx',数据)

3.原理剖析

解释一下为啥要将Vue.prototype.$bus = this放在beforeCreate内

全局事件总线利用的就是一个大家都知道的对象进行通信
全局事件总线的调用过程就是绑定事件、触发事件如果没在自己身上就向上级找、上级找不到就在原型上找
将一个大家都知道的对象挂在原型上在该对象上搭建事件，这个对象无疑最好的是使用vue对象（vm）。
在给Vue.prototype上挂载vm时，如果new vm 写在前面会报出模板中找不到Vue.prototype.$bus等信息
如果Vue.prototype.$bus写前面。vm对象还没有创建完毕，所以将他写在beforeCreate函数中恰到好处

四、$nextTick小技巧

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
常用于页面加载完毕后输入框聚焦等操作。

eg：这是一个触发编辑功能的函数，在触发之后等待模板渲染完毕，直接将鼠标聚焦在指定的输入框

editThisTodo(id){this.$bus.$emit("editSomeTodo",id)this.$nextTick(function(){this.$refs.inputTitle.focus()})
},

这四种操作的基础语法已经介绍完了，接下来会根据这四种操作的语法实现一个记事本小案例。