Vue 中$refs、$nextTick的使用及场景

风少爷05

已于 2022-05-23 23:16:58 修改

阅读量534

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-23 23:14:48 首次发布

本文链接：https://blog.csdn.net/weixin_69742797/article/details/124936470

版权

本文介绍了在Vue.js中如何利用$refs获取真实DOM元素和子组件的方法，以及何时使用$nextTick来确保在DOM更新后执行操作，特别讨论了$nextTick在处理输入框光标等场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue如何获取真实的DOM元素？

--可以通过 id 获取--

--还可以通过 ref定义值 $refs 获取--

<template>
  <div>
    <h1 ref="username" id="a">获取原生的DOM</h1>
  </div>
</template>

<script>
export default {
  //钩子函数 mounted 加载完DOM之后才能获取
  mounted() {
    console.log(this.$refs.username); //<h1>获取原生的DOM</h1>
    console.log(document.getElementById("a")); // <h1id="a">获取原生的DOM</h1id=>
  },
};
</script>

<style>
</style>

2、获取子组件的对象方法

--创建一个子组件，写一个方法--

--引入到父组件，注册，使用，添加ref定义值，通过$refs获取子组件的方法
1、-----------子组件------------------
<template>
  <div><p>我是一个组件</p></div>
</template>

<script>
export default {
  methods: {
    fn()