ref 引用

 

目录

1. 什么是 ref 引用

2. 使用 ref 引用 DOM 元素

3. 使用 ref 引用组件实例

4. 控制文本框和按钮的按需切换

5. 让文本框自动获得焦点

6. this.$nextTick(cb) 方法

---

1. 什么是 ref 引用

 

ref 用来辅助开发者在不依赖于jQuery 的情况下，获取DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的DOM 元素或组件的引用。默认情况下，  组件的$refs 指向一个空对象。

<template>
   <div>
     <h3>MyRef 组件</h3>
     <button @click="getRef">获取 $refs 引用</button>
   </div>
</template>

export default {
    methods: {
            getRef() { console.log(this)} 
            //this是当前组件的实例对象，this.$refs默认指向空对象
    }
}