Vue---$nextTick、$set、$ref、$event、$bus详细理解

朱雀 2024-04-07 15:59 19阅读 0赞

## 一、$nextTick ##

不用$nextTick有时候会导致什么问题？

导致执行的代码顺序不对，造成功能失败！

![3e3df0664b724db7a3f3252617841c77.png][]

**我们要实现一个编辑功能，当我们单击编辑的时候，也要让编辑的文本框获取焦点**

handleEdit(todo){
            // todo.hasOwnProperty()判断身上有无什么属性
          if(todo.hasOwnProperty()){
           //有的话
           todo.isEdit= true
          }else{
            //  没有的话
            
        //   todo.isEdit= true不能这么写 这么添加的isEdit的话 一会更改isEdit的时候，页面不会更改
          this.$set(todo,'isEdit',true)  //这样写才被vue认可  上面那种做法不会有getter和setter
          }
        //   让我们编辑的那个输入框获取焦点
        //   this.$refs.inputTitle.focus()   这样做显然是不行的 存在一个顺序问题
        //   走完if语句之后,vue并没有解析模板,而是顺着往下执行this.$refs.inputTitle.focus()
        // 但是因为没有解析模板  this.$refs.inputTitle.focus()并不能使已经隐藏的编辑框得到焦点
        
        // $nextTick所指定的回调会在DOM结点更新完毕之后再执行
        this.$nextTick(function(){
            this.$refs.inputTitle.focus()
            })
        },

<template>
        <li>
            
            <label>
                
                <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
                
                <span v-show="!todo.isEdit">{
       {todo.title}}</span>
                
                <input type="text" v-show="todo.isEdit"  :value="todo.title" @blur="handleBlur(todo,$event)"
                        ref="inputTitle" />  
            </label>
            
    
            
            <button class="btn btn-danger"  @click="handleDelete(todo.id)" >删除</button>
    
            <button class="btn btn-edit"  v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
        </li>
    </template>

![cecd974d22164d55a735a354135b55ef.png][]

## 二、$set ##

这是全局 Vue.set 的别名。

[http://t.csdn.cn/OUoPw][http_t.csdn.cn_OUoPw]

**下面这个是另一个好人整理的**

[http://t.csdn.cn/lHA2K][http_t.csdn.cn_lHA2K]

## 三、$ref ##

[http://t.csdn.cn/j836G][http_t.csdn.cn_j836G]

## 四、$event ##

vue中点击事件或者是其他的事件可以通过在事件中**添加$event**进行对**标签元素的dom获取或者修改**标签指的属性等等。

**$event**是指当前触发的是什么事件（鼠标事件，键盘事件等）

**$event.target**则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

![b8ea07d1e428485ea72ae4dfeecbb43b.png][]

**showInfo1 函数 虽然调用的时候没有传入参数，但是我们在方法中依然可以使用**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                <h2>欢迎来到{
       {name}}学习</h2>
                
                <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
                
                <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
            </div>
     
     
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false 
     
                new Vue({
                    el:'#root',
                    data:{
                        name:'尚硅谷'
                    },
                    methods:{
                        showInfo1(event){
                            // 打印标签中的文字
                            console.log(event.target.innerText)
                            alert('同学你好!')
                        },
                        showInfo2(event,number){
                            console.log(event,number)
                            alert('同学你好!!')
                            
                        }
                    }
                })
            </script>   
        </body>
    </html>

## 五、$bus ##

首先说明Vue官方并没有为我们提供这个API，这个只是在开发中总结出来的经验

Vue.prototype.$bus

[http://t.csdn.cn/w5n1u][http_t.csdn.cn_w5n1u]

[3e3df0664b724db7a3f3252617841c77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/fcba22e673e64fe5a5fa0aea9848f2e4.png
[cecd974d22164d55a735a354135b55ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7197d43f3660435682f225a1ec89a01d.png
[http_t.csdn.cn_OUoPw]: http://t.csdn.cn/OUoPw
[http_t.csdn.cn_lHA2K]: http://t.csdn.cn/lHA2K
[http_t.csdn.cn_j836G]: http://t.csdn.cn/j836G
[b8ea07d1e428485ea72ae4dfeecbb43b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3ee67049944e4ffb93d46b7a92bcca2b.png
[http_t.csdn.cn_w5n1u]: http://t.csdn.cn/w5n1u