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

Posted 酷尔。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 快速入门系列Vue数据实现本地存储自定义事件绑定全局事件总线$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=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.全局事件总线的使用方式

  1. 安装全局事件总线
new Vue(
	......
	beforeCreate() 
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	,
    ......
)
  1. 使用全局事件总线
  • 接受数据（绑定事件）：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小技巧

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

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

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

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

VUE.js快速入门（vue本地应用⑤）

Vue中兄弟组件的通讯

1.空实例与自定义事件

$emit

$on

2.Vuex状态管理

state

mutation

commit

 

空实例与自定义事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-head></my-head>
        <my-list></my-list>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //空实例
        var vmContext=new Vue();
        var vm=new Vue({
            el:"#app",
            components:{
                "my-head":{
                    template:`<h1>{{message}}</h1>`,
                    data:function(){
                        return{
                            message:"this is my-head"
                        }
                    },
                    mounted:function(){
                        vmContext.$on("outgetContext",function(s){
                            this.message=s;
                        }.bind(this));
                    }
                },
                "my-list":{
                    template:`<ul>
                                <li v-for="item in items" @click="getContext">
                                    {{item}}
                                </li>
                             </ul>`,
                    data:function(){
                        return{
                            items:["第一","第二","第三"]
                        };
                    },
                    methods:{
                        getContext:function(s){
                            vmContext.$emit("outgetContext",s.target.innerHTML);
                            console.log(s)
                        }
                    
                    }
                }
            },

        })
    </script>
</body>
</html>

 

 这两个组件都是内部组件

从my-list分析template模板里使用的是`写的

data里是数组元素，methods里function参数s指的是<li>里的内容，使用$emit将数据传出去。

 

 在外面定义了一个新的vue实例目的就是间接的接受$emit传出的方法和返回值。

上面的组件前面都一样，在mounted后，就是挂载后methods里监听事件$on

将function里的参数指定到message上，这里this本来绑定的事function（s）需要修正使用bind到外面的组件中，或者使用箭头函数。

 这种就是比较麻烦的方式。

 

vuex：状态管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{count}}</div>
        <br/>
        <add-button></add-button>
        <remove-button></remove-button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>
    <script>
        //vuex实例化
        var store=new Vuex.Store({
            state:{
                count:0
            },
            mutations:{
                add:function(state){
                    state.count++;
                },
                remove:function(state){
                    state.count--;
                }
            }
        });

        //vue实例化
        var vm=new Vue({
            el:"#app",
            computed:{
                count:function(){
                    return store.state.count;
                }
            },
            components:{
                "add-button":{
                    template:`<input type="button" value="+" @click="add"/>`,
                    methods:{
                        add:function(){
                            store.commit("add");
                        }
                    }

                },
                "remove-button":{
                    template:`<input type="button" value="-" @click="remove"/>`,
                    methods:{
                        remove:function(){
                            store.commit("remove");
                        }
                }
            }
            }
        });
    </script>
</body>
</html>

 

这里就相当将这些提出来了，如果只用一遍就可以写里面，但是以复用形式来看这样写更好

分析:首先先引入vuex<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>

之后实例化vuex这里的Store是大写，state里写参数，mutation里写方法

之后写vue的实例el挂载id=app,computed是计算属性给count赋值，最后在组件的funtion里添加commit。

 

以上是关于Vue 快速入门系列Vue数据实现本地存储自定义事件绑定全局事件总线$nextTick的使用的主要内容，如果未能解决你的问题，请参考以下文章

VUE.js快速入门（vue本地应用⑤）

VUE.js快速入门（vue本地应用④）

VUE.js快速入门（vue本地应用④）

Vue快速入门-2-Vue框架高级操作

vue自定义表单存储到数据库

npm上传自定义vue组件入门