29 - ref 和 $refs 获取dom和组件

这篇具有很好参考价值的文章主要介绍了29 - ref 和 $refs 获取dom和组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作用: 利用 ref  和 $refs 可以用于 获取 dom 元素, 或 组件实例

特点: 查找范围 -> 当前组件内(更精确稳定)

1. 获取 dom:
        (1). 目标标签 - 添加 ref属性
<div ref="chartRef">我是渲染图表的容器</div>

        (2). 恰当时机,通过this.$refs.xxx,获取目标标签

mounted () {
    console.log(this.$refs.chartRef)
}

        代码示例:

// 前置配置

// 1. 下载 echarts
        npm i echarts

// 2. 新建typeing.d.ts,复制以下代码
declare module 'echarts' {
    const echarts: any
    export default echarts
  }
  

29 - ref 和 $refs 获取dom和组件,Vue3学习笔记,vue.js

 文章来源地址https://www.toymoban.com/news/detail-676531.html

2. 获取组件

        (1). 目标组件 - 添加 ref 属性

<BaseForm ref="baseForm"></BaseForm>

        (2). 恰当时机, 通过 this.$refs.xxx, 获取目标组件,就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

29 - ref 和 $refs 获取dom和组件,Vue3学习笔记,vue.js

 

到了这里,关于29 - ref 和 $refs 获取dom和组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 ts获取组件 ref元素的值

    在 Vue 3 + TypeScript 中,要获取组件 ref 元素的值,可以通过 ref 函数创建一个 ref,并将其绑定到组件的 ref 属性上。然后,可以通过访问 ref 的 .value 属性来获取该组件的实例。 以下是一个示例代码: 在上述代码中,我们首先使用 ref 函数创建了一个名为 childComponentRef 的 ref,并

    2024年02月05日
    浏览(36)
  • vue3中ref获取不到组件实例&&数组中对象的属性值去重

    1、vue3中ref获取不到组件实例 原因 :使用语法糖的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 script setup 中声明的绑定。 解决方法 : 为了在 语法糖组件中明确要暴露出去的属性,使用 defineExpose 编译器宏将需要暴露出去的变

    2024年02月11日
    浏览(33)
  • vue3 setup 通过ref访问dom元素

    2024年02月15日
    浏览(34)
  • 【vue2第十二章】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用

    为什么会有 ref 和 $refs? 因为在vue页面中使用dom查找元素,不管你是不是在子组件里面查找,查找的都是整个页面的元素,如果你想查找单独组件里面的元素是不容易实现的,除非把每个组件的class写成独一无二,但是在日常开发中,一个vue页面不知道会有多少组件,所以出

    2024年02月09日
    浏览(27)
  • 【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch

    所谓响应式就是界面和数据同步,能实现实时更新。 Vue 中用过三种响应式解决方案,分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。 vue3中实现响应式数据的方法是使用ref和reactive。 reactive更推荐去定义复杂的数

    2024年02月03日
    浏览(35)
  • 【Vue3】vue3通过ref获取元素离顶部的距离

    vue3版本 ^3.2.45 [ref].value.$el.getBoundingClientRect().top 通过ref获取元素。 使用 getBoundingClientRect().top 获取离顶部的距离 homeView.vue

    2024年02月15日
    浏览(37)
  • vue3创建和获取循环动态ref

    定义如下: 然后在需要循环赋值ref的元素上使用setRef,具体如下 此时每个元素的值便都存boxRefs数组中了,使用方法和使用数组无异,如下

    2024年02月16日
    浏览(30)
  • vue3父组件使用ref调用子组件方法

    在vue2中,父组件通过ref调用子组件的方法只需要给子组件添加ref属性,然后使用this.$refs.XXX.method即可 但是在vue3中,子组件需先使用defineExpose将方法暴露给父组件 调用方法如下: 1、使用getCurrentInstance 2、使用ref函数创建一个响应式的引用,并将其绑定到子组件上

    2024年01月16日
    浏览(38)
  • Vue获取子组件实例对象 ref 属性

    在 Vue 中推荐使用 ref 属性获取 DOM 元素,这种方式可以提高性能。 如果将 ref 属性使用在组件上,那么返回的就是这个组件的实例对象。 使用方式:`p ref=\\\"xxx\\\"` 或 `Banner ref=\\\"xxx\\\"` 。 获取方式:this.$refs.xxx 1.原生 JS 获取 DOM 元素 【不推荐】: 2. 通过 ref 属性获取 DOM 元素 【推荐

    2024年02月04日
    浏览(36)
  • vue3探索——使用ref与$parent实现父子组件间通信

    在vue3中,可以使用vue3的API defineExpose() 函数结合 ref 或者 $parent ,实现父子组件数据的传递。 子组件:通过 defineExpose() 函数,向外暴露响应式数据或者方法 父组件:通过 ref 获取子组件实例,进而获取子组件暴露的响应式数据或方法 💡 你没看错!这里的 ref 就是经常用来定

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包