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

【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用 文章目录一、本地存储1.概念2.接口3.实际操作二、自定义事件绑定1.自定义事件使用过程2.绑定自定义事件的语法3.其他注意事项三、全局事件总线1.全局事件总线概念2.全局事件总线的使用方式3.原理剖析四、$nextTick小技巧一、本地存储1.概念

推荐整理分享【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用(vue快速入门与实战开发)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue入门教程简书,vue从入门到精通教程,vue详细教程,vue快速入门与实战开发,vue入门视频教程,vue怎么入门,vue入门教程,vue怎么入门,内容如对您有帮助，希望把文章链接给更多的朋友！

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

分类：

永久存储 使用localStorage临时存储 使用sessionStorage2.接口

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

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=name console.log(name) }, getschname(name){ this.schname=name console.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-names name:"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-names name:"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() })},

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