Vue3使用ref解决GetElementById为空的问题

更新时间：2023年12月04日 11:07:30 作者：程序员正茂

今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下

1.Vue3 中 ref 访问单个元素

<template>
  <div ref="hello">我爱北京天安门</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const hello = ref<any>(null);
onMounted(() => {
  console.log(hello.value); // <div>我爱北京天安门</div>
});
</script>

注意：

变量名称必须要与 ref 命名的属性名称一致。
通过 hello.value 的形式获取 DOM 元素。
必须要在 DOM 渲染完成后才可以获取 hello.value，否则就是 null。

2.Vue3 中 ref 访问v-for元素

<template>
  <ul>
    <li v-for="item in 10" ref="itemRefs">
      <p>{{item}} - 同学</p>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
 
 
const itemRefs = ref<any>([]);
onMounted(() => {
  console.log(itemRefs.value);
});
</script>

注意，这里取到的是<li>元素节点，要取到<p>,则需要从childNodes中获取

itemRefs.value[i].childNodes[0]

到此这篇关于Vue3使用ref解决GetElementById为空的问题的文章就介绍到这了,更多相关Vue3 ref解决GetElementById为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目之index.html如何引入JS文件
这篇文章主要介绍了vue项目之index.html如何引入JS文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue进行下载与处理二进制流文件的方法详解
这篇文章主要为大家详细介绍了vue如何实现将后端返回的二进制流进行处理并实现下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue3中批量全局注册组件实例详解
在vue中，我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的，使用的时候是自己全局注册组件时的名称，而不是组件名，这篇文章主要介绍了vue3中批量全局注册组件,需要的朋友可以参考下
2023-05-05
浅谈vue实现数据监听的函数 Object.defineProperty
本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
el-tree的实现叶子节点单选的示例代码
本文主要介绍了el-tree的实现叶子节点单选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue-cli 介绍与安装
这篇文章主要给大家介绍的是vue-cli 介绍与安装，vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的，下面文章详细内容,需要的朋友可以参考一下
2021-10-10
Vue动态路由路径重复及刷新丢失页面问题的解决
这篇文章主要介绍了Vue动态路由路径重复及刷新丢失页面问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue.js全局组件和局部组件示例代码
组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
2022-12-12
vue+Element-ui实现分页效果实例代码详解
这篇文章主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
把vue-router和express项目部署到服务器的方法
下面小编就为大家分享一篇把vue-router和express项目部署到服务器的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02