vue (ref 和 $nextTick 的使用）_ref.nexttick-CSDN博客

本文链接：https://blog.csdn.net/m0_60424565/article/details/120487772

本文详细介绍了Vue.js中ref属性的使用，包括如何通过ref获取DOM元素和组件对象，以及在mounted生命周期钩子中进行操作。同时，探讨了nextTick的原理和应用场景，如在DOM更新后的同步操作。最后，展示了在实际应用中如何利用nextTick实现点击搜索自动获取焦点的功能。

摘要由CSDN通过智能技术生成

一、首先介绍一下ref的使用：

1.目标：通过id 或 ref 属性获取原生DOM(获取标签)

在mounted生命周期 - 2种方式获取原生DOM标签

① 用id属性

② ref属性

小例子：

<template>
  <div>
       <!-- 获取标签可以用ref -->
       <p>1.获取原生DOM元素</p>
       <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>

<script>
export default {
     // 目标：获取组件对象
     // 1.创建组件/引入组件/注册组件/使用组件
     // 2.组件起别名ref
     // 3.恰当时机，获取组件对象


     mounted() {
          // 两种方式都能获取到
          console.log(document.getElementById('h'));
          // $refs对象里面特有的属性
          console.log(this.$refs.myH)
     },
    
     
}
</script>

<style>

</style>

运行结果：

2. 目标：通过ref属性获取组件对象

<template>
  <div>
       <p>2.获取组件对象 - 可调用组件内一切</p>
       <demo ref="de"></demo>
  </div>
</template>

<script>
import Demo from './Demo.vue';
export default {
    
  components: { Demo },

     mounted() {
          // 子组件调用
          let demoObj = this.$refs.de
          demoObj.fn()
     },
   
     
}
</script>

<style>

</style>

<template>
  <div>
       <p>我是Demo组件</p>
  </div>
</template>

<script>
export default {
     methods:{
            //组件对象
          fn() {
               console.log('demo组件内的方法被调用了')
          }
     }

}
</script>

<style>

</style>

3. nextTick基础使用

nextTick 可以等DOM执行更新后

vue更新DOM是异步的

<template>
  <div>
       <p>3. vue 更新DOM是异步的</p>
       <p ref="myP">{{count}}</p>
       <button @click="btn">点击count+1,马上提取p标签内容</button>
  </div>
</template>

<script>
export default {
  data() {
       return {
            count:0,
       }
  },
    
     methods: {
          btn() {
               this.count++;  // vue监测数据更新
               //vue更新DOM是异步代码 开启一个DOM更新队列(异步任务) 会从0开始
               // console.log(this.$refs.myP.innerHTML)  //0

               
               // 原因:vue更新DOM异步
               // 解决: this.$nextTick()
               // 过程: DOM 更新完全挨个触发 $nextTick里的函数体
               this.$nextTick(()=> {
                    console.log(this.$refs.myP.innerHTML)
                    console.log('DOM')
               })
          }
     }
     
}
</script>

<style>

</style>

使用场景(点击搜索自动获取焦点)

<template>
  <div>
       <input type="text" placeholder="这是一个输入框" v-if="isShow" ref="myInp">
       <button v-else @click="btn">点击我搜索</button>
  </div>
</template>

<script>
// 目标： 点按钮(消失) -输入框出现并且聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
     data() {
          return {
               isShow:false,
          }
     },
     methods: {
        async  btn() {
               this.isShow = true
               // this.$refs.myInp.focus()
               // 原因：data变化更新DOM是异步的，
               //       输入框还没有挂载到真实DOM上


               // 解决：
               // this.$nextTick(()=> {
               // this.$refs.myInp.focus()

               // })

               // 扩展:await 取代回调函数
               // $nextTick() 原地返回Promise对象
               // focus 自动获取焦点方法
               await this.$nextTick()
               this.$refs.myInp.focus()

          },
     }

}
</script>

<style>

</style>