ref引用
1. ref 引用概念
- jquery :简化了程序员操作 DOM 的过程。
- vue 优势:MVVM 在vue中,程序员不需要操作 DOM 。程序员只需要把数据维护好即可。
- 建议:在 vue 的项目中,不要使用 jquery。
- 那么在 vue 中需要操作 DOM 怎么办呢?
ref 用来辅助开发者在不依赖 jQuery ,不调用获取 DOM 的API 下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs 对象,里面储存着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs 指向一个空对象。
2.使用 ref引用获取 DOM
-
使用 ref 属性,为对应的标签添加引用的名称
该名称不要重复,如果重复,获取到的是后面的 DOM
<h3 ref="myH3"> Test.vue 根组件</h3> <p ref="myP">count from right {{ countFather }} </p>
-
在该组件实例的 $refs 对象上可以获取到 DOM
即可对 DOM 进行需要的操作
export default { methods: { printThis(){ console.log(this) this.$refs.myH3.style.color = 'red' this.$refs.myP.style.color = 'blue' } } }
3. 使用 ref 引用组件实例
-
使用 ref 属性,为对应的组件**添加引用的名称 **xxx
-
可以通过
$refs.xxx
得到组件的实例 -
即可访问到 methods 中的方法以及 data 的数据
<Right @numChange="getNewCount" ref="comRight"></Right>
resetCount(){ console.log(this.$refs.comRight) this.$refs.comRight.reset() }
4. 了解 this.$nextTick 应用场景
4.1 遇到的场景
<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
<button v-else @click="showInput">展示输入框</button>
showInput(){
// 展示文本框
this.inputVisible = true
// 自动获得焦点
this.$refs.iptRef.focus()
}
Cannot read properties of undefined (reading 'focus')
调用 focus
前面的是 undefined
原因: 当执行完 this.inputVisible = true
,data数据已经改变,将要对 ui结构进行更新,还处于 beforeUpdate
时期,此时 ui 结构还没有得到更新,页面中还没有 input 标签,当访问this.$refs.iptRef
时,得到的就是 undefined。
4.2 解决方案
this.$nextTick(callback) :将callback回调函数延迟到下一个 DOM 更新周期之后执行。
- 等组件的 DOM 更新完成之后,再执行 callback 回调函数。
- 从而能保证 callback 回调函数可以操作到最新的 DOM 元素。
4.3 为什么不用 updated
当 input 失去焦点时,data的数据也会发生变化,此时也会调用 updated 函数,但是此时 input 得DOM 结构已经被移除,会报错。