vue3使用ref获取dom元素，并在父元素中使用子元素上的属性和方法

于 2024-05-21 15:01:45 发布
阅读量355 收藏 2
点赞数 9
分类专栏： 笔记 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46394325/article/details/139092684
版权

通过ref实现父子通信

文章目录

可以使用该子元素上的属性和方法，也是父子通信的常用方法
在vue2项目中，给dom上添加ref属性，可直接通过this.$ref.ref属性值即可直接拿到该dom元素，可直接使用该dom元素上的属性和方法

但在vue3项目中
想要在父组件中使用子组件上的变量和方法必须在子组件中通过defineExpose将要使用的变量和方法暴露出去才能使用

1. 给子组件添加ref属性

在这里插入图片描述

2. 通过声明同名ref属性值的变量拿到dom元素

在这里插入图片描述

3.将想要在父组件中使用到的变量或方法通过defineExpose暴露出来

在这里插入图片描述

4.直接在父组件中调用dom上暴露出来的方法

在这里插入图片描述

快乐小土豆~~
关注
  • 9
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的ref和$refs的使用
01-21
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <...
Vue3 通过ref获取DOM节点
wangchaohpu的博客
01-26 2414
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。-- vm.$refs.p 会是 DOM 节点 -->-- vm.$refs.child 会是子组件实例 -->-- 当动态绑定时，我们可以将ref定义为回调函数，显式地传递元素或组件实例 -->当v-for用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。一；
vue3 ref 获取标签 dom
秋来九月八
07-06 2606
在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。ref 允许你在 Vue 组件中获取对特定 DOM 元素或子组件实例的引用，以便可以进行以下操作：直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。这对于需要直接操作 DOM 元素的情况非常有用，例如，动态改变样式、内容或绑定事件。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。
在Vue3中nextTick的使用详解
最新发布
m0_70547044的博客
05-11 984
是Vue.js的最新版本，带来了许多改进和新特性。其中一个重要的改进是对nextTick API的重构和改进。在Vue3中，nextTick的使用方式与Vue2有所不同，本文将详细介绍在Vue3中如何使用nextTick。
vue3获取dom元素
brilliantSt的博客
07-14 8309
在vue3中获取 dom元素
Vue3中操作dom的四种方式，建议收藏！！！
山山而川~
01-17 2万+
最近主管提出了许多优化用户体验的要求，其中很多涉及 dom 操作。本文将 Vue3 中常见的 dom 操作总结了一下。觉得文章不错、或对自己开发有所帮助，欢迎点赞收藏！
【Vue3】获取DOM节点的几种方式
m0_62811051的博客
11-30 3万+
在Vue3框架里面是解除了this这个对象，所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面。所以在默认情况下， 组件的 $refs 指向一个空对象。，通过该函数获取对象节能看到该对象包含界面中的refs。但是vue3中自带了能返回当前组件实例对象的函数。获取相应元素并进行操作。
vue3中获取dom元素和操作
weixin_42349568的博客
02-09 3万+
一，需求概述 直接举例子来说明吧，我想要做的是，遍历这几个菜单，获取他们的dom元素的宽度。当文字dom元素宽度太长的话，需要滚动显示文本。 二，实现思路 对应的html: <div class="icon-box" ref="menu_item"> <div class="menu-box" v-for="(item, index) in iconMenus" :key="index" @click="clickItem(item)" >
[vue3] 子组件调用父组件的多种方法
wyy7293的博客
04-02 3万+
子组件调用父组件的方法 方法1 - 异步方式 父组件定义供子组件调用的xx方法 @updata:xx=xx 子组件中在setup的emit方法调用 context.emit(‘update:xx’) 注意: .sync 在这里不好用 父组件组件 <my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe> 子组件组件 setup(props, context) { function fn
vue 父组件通过$refs获取子组件的值和方法详解
10-16
今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE实时监听元素距离顶部高度的操作
10-15
主要介绍了VUE实时监听元素距离顶部高度的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js中ref及$refs的使用方法解析
12-13
vue.js中文社区文档上的说明已经就比较通俗易懂了，其实我们可以这么理解，ref和$refs其实就是用来获取/操作DOM元素的；类似于jquey中的$(“.xxx”)； 那么我们如何使用ref和$refs呢？ ref可以直接加在HTML标签上，...
vue.js中ref和$refs的使用及示例讲解
12-10
vue.js中文社区文档上的说明已经就比较通俗易懂了，其实我们可以这么理解，ref和$refs其实就是用来获取/操作DOM元素的；类似于jquey中的$(“.xxx”)； 那么我们如何使用ref和$refs呢？ ref可以直接加在HTML标签上，...
vue3获取dom
Heartnottowake的博客
02-27 4382
3,不能直接在setup里面拿到dom的值，因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到，比如onMounted。1，获取dom的ref元素名称，要对应暴露的名称，不然会出现无效的dom报错，也就是拿到的是null。2,在setup中，使用ref（null）获取dom。
vue3通过ref获取dom元素并修改样式
博哥的二进制世界
07-22 1万+
vue3通过ref获取dom元素并修改样式 vue3获取dom元素和vue2类似，都是通过ref来获取，请看以下示例： ①元素中通过ref获取元素boxOneRef ②state中创建boxOneRef属性 ③重新创建变量boxOneProxy，并赋值为state.boxOneRef,使之成为state.boxOneRef的代理对象（因为state.boxOneRef属于proxy对象，必须通过代理对象来修改其内部属性） <template> <div class="page rela
vue3 - 10.父子子父组件传值，ref获取方法
qq_34111842的博客
10-16 3112
/ 用vue3+ts实现父子组件声明，父子组件传值，子父组件传值，父组件获取子组件声明的方法，父组件修改(添加)子组件样式，并且灵活应用ref，reactive，toRaw，defineProps，defineEmits，defineExpose，以及ts声明字符串，数值，数组，对象类型。
vue 3.0 使用ref获取dom元素
热门推荐
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
面试题:vue3获取dom的方式
wsrzsfgst的博客
12-17 695
需要注意的是，在 Vue 3 中，使用原生的 DOM 操作方法来获取 DOM 元素时，应该在。等原生方法来获取 DOM 元素。根据实际需求和场景，选择合适的方式来获取 DOM 元素。钩子函数，以确保 DOM 元素已经渲染完毕。除了上述方法，还可以使用。// 访问 DOM 元素。// 获取 DOM 元素。
vue中ref获取dom的子元素
06-08
在Vue中，可以通过`$refs`对象来获取DOM元素的引用。如果要获取DOM元素的子元素，可以...在上面的例子中，我们首先通过`$refs`获取了父元素的引用，然后使用`querySelectorAll`方法获取所有具有`.child`类名的子元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值