详解Vue中$refs和$nextTick的使用方法
作者：执手天涯@
这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下
1、$refs简介
$refs是vue提供的获取真实dom的方法。
$refs获取DOM元素
【使用步骤】：
在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素
【代码演示】：
<template>
<div>
<h1>获取原生的DOM元素</h1>
<h4 id="h" ref="myH">我是h4标签</h4>
</div>
</template>
<script>
export default {
// 在挂载之后获取原生dom
mounted() {
console.log(document.getElementById("h"));
// this.$refs是vue对象中特有的属性
console.log(this.$refs.myH);
},
};
</script>
<style>
</style>
【控制台效果】：
$refs获取组件对象
【代码演示】：
<template>
<div>
<h1>获取组件对象</h1>
<Demo ref="myCom"></Demo>
</div>
</template>
<script>
import Demo from "@/components/Demo";
export default {
mounted() {
console.log(this.$refs.myCom);
// 获取子组件对象
let demo = this.$refs.myCom;
// 调用子组件中的方法
demo.fn();
},
components: {
Demo,
},
};
</script>
<style>
</style>
【效果展示】：
2、$nextTick基本使用
$nextTick等待dom更新之后执行方法中的函数体
vue异步更新DOM
【vue异步更新演示】：
<template>
<div>
<h1>获取组件对象</h1>
<Demo ref="myCom"></Demo>
</div>
</template>
<script>
import Demo from "@/components/Demo";
export default {
mounted() {
console.log(this.$refs.myCom);
// 获取子组件对象
let demo = this.$refs.myCom;
// 调用子组件中的方法
demo.fn();
},
components: {
Demo,
},
};
</script>
<style>
</style>
【效果演示】:
利用$nextTick解决以上问题
【代码演示】：
<template>
<div>
<p>vue异步更新dom</p>
<p ref="mycount">{{ count }}</p>
<button @click="add1">点击+1，马上获取数据</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
add1() {
this.count++;
// console.log(this.$refs.mycount.innerHTML);
// 解决异步更新问题
// dom更新完成之后会顺序执行this.$nextTick（）中的函数体
this.$nextTick(() => {
console.log(this.$refs.mycount.innerHTML);
});
},
},
};
</script>
<style>
</style>
【效果演示】：
$nextTick使用场景
【代码演示】：
<template>
<div>
<p>$nextTick()使用场景</p>
<input
ref="search"
v-if="isShow"
type="text"
placeholder="这是一个输入框"
/>
<button @click="search">点击-立即搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
};
},
methods: {
search() {
this.isShow = true;
this.$nextTick(() => {
this.$refs.search.focus();
});
},
},
};
</script>
<style>
</style>
【效果】：
到此这篇关于详解Vue中$refs和$nextTick的使用方法的文章就介绍到这了,更多相关Vue $refs $nextTick内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！