Vue3如何通过ref获取真实DOM元素

最新推荐文章于 2024-03-08 11:21:24 发布
最新推荐文章于 2024-03-08 11:21:24 发布
阅读量2.5k 收藏 3
点赞数
分类专栏： vue 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang_my/article/details/125370649
版权

在Vue2中我们可以在<template>中的元素标签使用ref属性（类似于原生HTML标签的id属性）在<script>标签通过this.$refs拿到真实DOM标签的元素。

image.png

image.png

获取具体到<button>体，可以通过this.$refs.btn来获取。

但是在Vue3中，我们在setup函数中，无法获取this，它的指向是undefined。那我们如何获取呢？

这里我们需要用到Vue3提出的一个新APIgetCurrentInstance，英语翻译过来就是得到当前实例，这个函数调用的返回值就是当前组件实例对象，相当于vue2中组件的this。

首先引入这个API，

image.png

然后给button打上ref属性。注意！ 这里的ref不等同于返回响应式属性的那个refAPI。

image.png

随后我们调用函数，并且打印一下变量instance

image.png

如下图所示，看到这个refs对象了吗？

image.png

然后我们就可进行dom操作了，比如更改button的innerHTML

image.png

image.png

韩振方
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中使用$refs
a10534126的博客
03-06 1686
1、在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取 知道了怎么获取后，我们结合ElementPlus来使用，因为项目中用到了ElementPlus的表单验证，官网也是醉了，还写的是vue2的写法 话不多说，上代码 由于我得form表单外面包了一层el-dialog，是不能在onMounted中获取到$refs的，应该在触发对应事件，让dialog绑定的v-model变为true的获取获取 label-position=
vue3中ref获取dom的方式（包含for循环）
xuefeng11111的博客
03-10 6211
如何在Vue3中通过ref获取dom元素，这里说一下我遇到的情况和使用方式 情况一：只是单纯的获取某个dom元素 这种情况比较简单，直接在js中通过ref定义一个和html中元素上ref相同名字的变量即可 例子： <template> <div class="box" ref="boxRef"> box </div> </template> <script lang="ts" setup> import { onMount.
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
vue3 ref获取子组件显示 __v_skip : true 获取不到组件的方法 怎么回事怎么解决
最新发布
weixin_55209970的博客
03-08 876
于是我查看了一下子组件 由于我是用的语法糖写的 没有进行抛出 所以就有了拿不到的这个问题 上图看一下吧。将你子组件中的这个方法进行抛出 父组件就可以拿到啦 现在让我来看一下打印的效果吧~时，Vue 将不会对该组件进行渲染，也不会将其添加到虚拟 DOM 树中。是 Vue 3 中的一个特殊属性，用于跳过某些组件的渲染。如果你想获取子组件上的方法，需要确保子组件没有被标记为。okok~今天的问题就到这啦~~~~~过38节日去啦。获取该组件的显示时，将无法获取到该组件上的方法。要解决Vue 3中使用。
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
vue的一些基本使用 包括ref、路由、封装公共组件
weixin_44229267的博客
10-22 448
scoped作用:设置样式只在当前页面起效果 1.ref使用 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。 相当于通过ref转换，变成原生的了。 //这是parent.vue <div> <div class="box" ref='box1'>我是父组件</div> <vChild ref="child
为什么我娶不到vue渲染的值
qq_63311682的博客
11-25 231
无法获取vue渲染的值
Vue3 通过ref获取DOM结点
qq_59181609的博客
04-21 1万+
一；获取单个绑定了ref属性的标签结点 1.给想要获取DOM元素的标签加上 ref 属性，并自定义一个名称 2.在 setup 中使用 ref 声明一个变量名与标签中 ref 属性名称相同的变量 3.之后这个 ref 所定义的变量中存储的就是 ref 属性标记了的元素结点。 ...
Vue3中操作dom的四种方式，建议收藏！！！
热门推荐
山山而川~
01-17 2万+
最近主管提出了许多优化用户体验的要求，其中很多涉及 dom 操作。本文将 Vue3 中常见的 dom 操作总结了一下。觉得文章不错、或对自己开发有所帮助，欢迎点赞收藏！
ref 引用(vue获取DOM元素）
weixin_47124112的博客
07-11 1万+
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象。凡是以$开头的都是vue的内置成员如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代
Vue3使用ref获取dom元素
gurenchang的博客
08-10 1151
获取到对应的元素，但是在Vue3中，既没有this，也没有$refs，那么现在想获取dom元素，要怎么办呢？Vue3要获取dom还是要借助ref，同时还要借助生命周期。属性，然后在代码中通过this.$refs.xxx。Vue2中，可以通过给元素添加ref='xxx'中的元素还没挂载到页面上，所以必须在。原理如下：在Vue3中，
详解在Vue中通过自定义指令获取dom元素
12-08
 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么...
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
Vue 3 获取 DOM
訾博（ZiBo）的博客
04-14 293
Vue 3 获取 DOM
Vue3如何获取和操作DOM元素
键指江湖的博客
08-08 3509
环境：vue3+ts+vite目标：1.修改DOM的文本值和样式2.获取后代子DOM元素,操作修改</</</</importfrom'vue'constreflog</pText1stylepadding0 30px;</</</</importfrom'vue'constreflogonMounted=>log</看到了吧。
VUE3.0+TS用ref获取元素
weixin_51972964的博客
06-06 3279
<div ref="element" @click="handleClick">div元素</div> //在setup中无法使用this setup(){ //新建一个ref对象,对象命名必须与ref命名相同 //在setup的中还不是一个DOM节点类型,在DOM挂载后才会是ELEMENT类型,所以要设置泛型 const eleRef = ref<null | HTMLElement>(null) const handleClick = () => {
vue3 ref属性
greed
09-10 3204
vue3 ref属性 操作单个DOM元素 操作单个DOM或者组件的流程 定义一个响应式变量 把变量返回给模板使用 模板中绑定上述返回的数据 可以通过info变量操作DOM或者组件实例 <template> <div> <div>ref操作DOM和组件</div> <hr> <!-- 3、模板中绑定上述返回的数据 --> <div ref='info'>hello</div&g
vue3 - vue3中使用ref来获取dom节点
qq_43886365的博客
11-15 6540
vue3中使用ref获取dom节点
vue的虚拟dom,$refs
weixin_50515020的博客
08-31 632
虚拟dom就是使用js的object模拟真实的dom,当状态发生变化，更新之前做diff，达到最少操作dom效果 vue为什么引入虚拟DOM? vue1.0响应式粒度太细，Object.defineProperty()每个数据的修改都会通知watcher，进而通知dom去改变，对大型项目来说是一个噩梦！内存开销非常大。 vue2.0引入虚拟dom，通过diff之后再通知dom去改变，相对于1.0响应式的级别修改了，watcher只到组件，组件内部使用虚拟dom vue中虚拟DOM干了啥? 虚拟dom没
vue3如何使用ref给dom元素新添加一个class
10-28
在Vue3中，可以使用`ref`来给DOM元素添加一个新的class。在原有的Vue2中，我们通过`ref`引用DOM元素，然后通过`classList`来添加/删除class。而在Vue3中，`ref`的用法有所改变。 首先，我们需要在Vue3的setup函数中定义一个`ref`，并将它绑定到需要操作的DOM元素上。假设我们有一个<button>按钮，我们想给它添加一个新的class，可以将`ref`绑定在这个按钮上，像这样： ``` <template> <button ref="myButton">按钮</button> </template> ``` 然后，在setup函数中，我们可以通过`ref`来获取到DOM元素的引用，然后使用`value`属性来操作它。 ``` <script> import { ref } from 'vue'; export default { setup() { const myButton = ref(null); // 创建一个ref并初始化为null // 在mounted钩子函数中给DOM元素添加新class onMounted(() => { myButton.value.classList.add('new-class'); }); return { myButton, // 将ref返回，使其在模板中可用 }; }, }; </script> ``` 在上面的例子中，我们使用了`onMounted`钩子函数来保证当组件被挂载后，才会执行给DOM元素添加新class的操作。通过`myButton.value`能够访问到真实的DOM元素，然后使用`classList.add`方法来添加新的class。 这样，当组件被渲染并挂载后，就会自动给按钮添加一个新的class "new-class"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值