ref 引用
前言
这篇文章介绍vue组件的 ref 引用以及$nextTick()!详细到牙齿,看完不会你打我。哈哈哈,开玩笑的,不多说,上刺刀!!
1. 什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs 指向一个空对象。
2. 使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作:
<template>
<div>
<h1 ref="myh11">App 根组件</h1>
<hr />
<button type="button" class="btn btn-primary" @click="getRefs">获取 $refs 引用</button>
</div>
</template>
<script>
export default {
name: 'MyApp',
methods: {
getRefs() {
// console.log(this.$refs)
this.$refs.myh11.style.color = 'red'
},
},
</script>
3. 使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
<!-- app.vue 代码 -->
<template>
<div>
<h1 ref="myh11">App 根组件</h1>
<hr />
<button type="button" class="btn btn-primary" @click="getRefs">获取 $refs 引用</button>
<my-counter ref="counterRef"></my-counter>
</div>
</template>
<script>
// 导入组件
import MyCounter from './Counter.vue'
export default {
name: 'MyApp',
methods: {
getRefs() {
// console.log(this.$refs)
// console.log(this)
this.$refs.myh11.style.color = 'red'
// console.log(this.$refs.counterRef)
// 父组件调用子组件的reset()函数。
this.$refs.counterRef.reset()
},
},
// 注册组件
components: {
MyCounter,
},
}
</script>
<!-- MyCounter 组件代码 -->
<template>
<div class="counter-container">
<h3>Counter 组件 --- {{ count }}</h3>
<hr />
<button type="button" class="btn btn-info" @click="count += 1">+1</button>
</div>
</template>
<script>
export default {
name: 'MyCounter',
data() {
return {
count: 0,
}
},
methods: {
reset() {
this.count = 0
},
},
}
</script>
4. 控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下:
<template>
<div>
<h1>App 根组件</h1>
<hr />
<input type="text" class="form-control" v-if="inputVisible" ref="ipt" />
<button type="button" class="btn btn-primary" v-else @click="showInput">展示 input 输入框</button>
</div>
</template>
<script>
export default {
name: 'MyApp',
data() {
return {
inputVisible: false,
}
},
methods: {
showInput() {
// 要展示文本框
this.inputVisible = true
},
},
}
</script>
5. 让文本框自动获得焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的
.focus() 方法即可。示例代码如下:
console.log(this.$refs.ipt)
// 获取到文本框的引用对象,然后调用 focus() 方法
this.$refs.ipt.focus()
如果直接写到 showInput() 里面,因为异步执行,函数调用的时候,最新的DOM还没加载好,所以输入框就还没加载出来,只有原来的按钮,this. r e f s . i p t 就 是 一 个 u n d e f i n e d 。 解 决 方 法 接 着 往 下 看 ( t h i s . refs.ipt 就是一个 undefined 。解决方法接着往下看(this. refs.ipt就是一个undefined。解决方法接着往下看(this.nextTick(cb))。
6. this.$nextTick(cb) 方法
组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 异步地重新渲染完成后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
<template>
<div>
<h1>App 根组件</h1>
<hr />
<input type="text" class="form-control" v-if="inputVisible" ref="ipt" />
<button type="button" class="btn btn-primary" v-else @click="showInput">展示 input 输入框</button>
</div>
</template>
<script>
export default {
name: 'MyApp',
data() {
return {
inputVisible: false,
}
},
methods: {
showInput() {
// 要展示文本框
this.inputVisible = true
// 用this.$nextTick() 把对input的操作放到下一次DOM跟新之后。否则页面上根本不存在文本框元素。
this.$nextTick(() => {
console.log(this.$refs.ipt)
// 获取到文本框的引用对象,然后调用 focus() 方法
this.$refs.ipt.focus()
})
},
},
}
</script>
写在最后
✨个人笔记博客✨
星月前端博客
http://blog.yhxweb.top/
✨原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!