vue的ref引用

1.什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。
2.使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

<p ref="app1">app组件</p>
<button @click="getRef">红色</button>
 methods:{
    
    
    getRef(){
    
    
      // 操作dom元素，把文本颜色改为红色
      this.$refs.app1.style.color = 'red';
    }
  }

3.使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

<Left ref="count"></Left>
import Left from '@/components/Left.vue'
export default {
    
    
  data(){
    
    },
  methods:{
    
    
    reset(){
    
    
      // 引用组件的实例之后，就可以调用组件上的methods方法
      this.$refs.count.resetCount();
    }
  },
  components:{
    
    
    Left
  }
}

4.实例：控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：

<template>
  <div>
    <input type="text" v-if="isVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="showInput">显示input</button>
  </div>
</template>
<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      isVisible: false
    }
  },
  methods: {
    
    
    showInput () {
    
    
      this.isVisible = true
    },
    showButton () {
    
    
      this.isVisible = false
    }
  }
}
</script>

让文本框自动获得焦点
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。示例代码如下：

showInput () {
    
    
      this.isVisible = true
      this.$refs.iptRef.focus()
    },

但是此时会报错，因为在这里插入图片描述
此时打印一下this.$refs.iptRef

所以调用this.$refs.iptRef.focus()会报错,原因是代码执行完this.isVisible = true之后，只是数据发生了改变，而页面DOM结构还未被渲染，此时input也就不会显示，执行this.$refs.iptRef就是undefined了,怎么解决这种问题呢,就用到了this.$nextTick(cb）
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素,上面的代码修改一下就好了

showInput () {
    
    
      this.isVisible = true
      this.$nextTick(() => {
    
    
        this.$refs.iptRef.focus()
      })
    }

Guess you like