位置: IT常识 - 正文

Vue ref获取元素和组件实例(vue ref获取元素高度)

编辑:rootadmin
Vue ref获取元素和组件实例 获取元素

推荐整理分享Vue ref获取元素和组件实例(vue ref获取元素高度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 ref获取元素,vue获取ref添加样式,vue3 ref获取元素,vue3 ref获取元素,vue ref获取元素高度,vue3 ref获取元素,vue ref获取元素高度,vue ref获取元素高度,内容如对您有帮助,希望把文章链接给更多的朋友!

获取元素还不简单?直接document.querySelector(“#id”)不就获取到了吗?例如下面的代码。在写Vue的过程中,我们从来不会写这种代码,但是下面的代码在vue里面是可以运行的。

methods:{ getEl(){ let title= document.querySelector(".title") } }

绝大部分时间我们都是通过mustache语法来直接响应式更新数据,根本就不需要先找到具体的元素。但有时候,我们就想要获取某个元素,可以通过ref属性获取具体元素。

第一步:添加ref属性,并取名字。

<template> <h1 ref="title" class="title">Hello</h1></template>Vue ref获取元素和组件实例(vue ref获取元素高度)

第二步:通过$ref就可以获取到元素了。

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

ref="title"这里面的名字是随便取的,不需要和class的名字一样。

ref的使用时机

我们很少去获取元素的,因为根本不需要,我们只需要修改数据让vue自动帮我们更新UI就行。只有一些特殊场景可能会用到,比如我写的是一个代码编辑器或者实现一些生成代码的功能的时候。 比较有用的是ref也可以获取组件实例。

获取组件实例

获取组件实例后,我们是可以调用组件的方法的,这个还是有点用的。 我们写一个Banner.vue并把它引用到App.vue。 Banner.vue的template:

<template> <div class="banner"> <h1>banner</h1> </div></template>

在Banner.vue定义一个方法

methods:{ showBanner(){ console.log("showBanner") } }

我们可以通过ref和$ref获取到对应的banner组件,并且可以调用对应的方法。

<template> <banner ref="banner"/></template> mounted() { //组件实例代理对象 console.log(this.$refs.banner) //调用组件方法 this.$refs.banner.showBanner() //组件元素 console.log(this.$refs.banner.$el) }

这是获取到的代理对象,里面有showBanner方法,可以证明,这个就是Banner的代理对象。 紧接着我们调用的showBanner()方法也输出了内容。 最后,获取到了banner组件的顶层元素。 如果只有一个顶层元素,那么this.refs.banner.refs.banner.refs.banner.el会直接获取顶层元素,如果有多个元素,那么会获取第一个node节点,一般是#text,也就是换行。

本文链接地址:https://www.jiuchutong.com/zhishi/295346.html 转载请保留说明!

上一篇:三维重建(单目、双目、多目、点云、SFM、SLAM)(单图像三维重建)

下一篇:使用axis调用WebService,Java WebService调用工具类(客户端调用axis1.4的方式)

  • oppo手机纯净模式在哪里(oppo手机纯净模式在哪里打开)

    oppo手机纯净模式在哪里(oppo手机纯净模式在哪里打开)

  • cdr文件用什么打开(cdr文件用什么打开 视频)

    cdr文件用什么打开(cdr文件用什么打开 视频)

  • wechat和微信的区别是什么(wechat和微信的区别知乎)

    wechat和微信的区别是什么(wechat和微信的区别知乎)

  • QQ浏览器删除的照片怎么找回(qq浏览器删除的浏览记录怎么找回)

    QQ浏览器删除的照片怎么找回(qq浏览器删除的浏览记录怎么找回)

  • 苹果手机有视频通话美颜吗(苹果手机有视频剪辑功能吗)

    苹果手机有视频通话美颜吗(苹果手机有视频剪辑功能吗)

  • wifi出现有问号的图标(wifi出现问号是欠费了吗)

    wifi出现有问号的图标(wifi出现问号是欠费了吗)

  • 华为mate30摄像头玻璃碎了(华为mate30摄像头模糊官方解决教程)

    华为mate30摄像头玻璃碎了(华为mate30摄像头模糊官方解决教程)

  • 两个不同品牌的路由器怎么桥接(两个不同品牌的路由器可以组网吗)

    两个不同品牌的路由器怎么桥接(两个不同品牌的路由器可以组网吗)

  • 微信购买火车票为什么要登录12306(微信购买火车票退票钱多久到账)

    微信购买火车票为什么要登录12306(微信购买火车票退票钱多久到账)

  • 怎么用照片做视频并且配上音乐(怎么用照片做视频卡点)

    怎么用照片做视频并且配上音乐(怎么用照片做视频卡点)

  • 钉钉连麦是什么意思(钉钉连麦是什么软件)

    钉钉连麦是什么意思(钉钉连麦是什么软件)

  • 手机没有电池直接充电能开机吗(手机没有电池直接插充电器怎么开不起机)

    手机没有电池直接充电能开机吗(手机没有电池直接插充电器怎么开不起机)

  • sd卡受损怎么修复(sd卡受损怎么修复里面的东西)

    sd卡受损怎么修复(sd卡受损怎么修复里面的东西)

  • 滴滴抢到的预约单在哪里看(滴滴抢到的预约单在哪里看订单编号)

    滴滴抢到的预约单在哪里看(滴滴抢到的预约单在哪里看订单编号)

  • 电子版是什么样子的(电子版是咋样的)

    电子版是什么样子的(电子版是咋样的)

  • 怎么删除拼多多的评价(怎么删除拼多多已评价过的订单)

    怎么删除拼多多的评价(怎么删除拼多多已评价过的订单)

  • 华为mate10下载的文件在哪里(mate10pro下载的文件在哪)

    华为mate10下载的文件在哪里(mate10pro下载的文件在哪)

  • iqoo和iqooneo区别(iqoo和iqooneo区别 知乎)

    iqoo和iqooneo区别(iqoo和iqooneo区别 知乎)

  • nova5pro支持无线充电吗(nova5pro能无线充电吗)

    nova5pro支持无线充电吗(nova5pro能无线充电吗)

  • 最右如何创建话题(最右如何添加通讯录好友)

    最右如何创建话题(最右如何添加通讯录好友)

  • 把抖音好友拉黑会怎样(把抖音好友拉黑对方知道吗)

    把抖音好友拉黑会怎样(把抖音好友拉黑对方知道吗)

  • apachectl命令  Apache服务器前端控制工具(apache trace)

    apachectl命令 Apache服务器前端控制工具(apache trace)

  • 小规模开的专票能抵扣进项税吗
  • 异地预缴税款怎么抵扣
  • 小企业会计准则和企业会计准则的区别
  • 牛奶 税率
  • 开给天猫的服务费分录如何做
  • 电商公司怎么进入
  • 2018年所得税表
  • 普票抵扣税
  • 公司住宿费用记什么费用
  • 购买办公桌椅属于什么费用
  • 房产代理公司收客户钱违法
  • 集体企业属于事业单位吗
  • 投资性房地产的后续计量从成本模式转为公允价值模式的
  • 企业结业后实收资本怎么处理?
  • 如何关闭windows10自动更新
  • 销售回款率怎么计算
  • 视频监控维护
  • 如何调整往来账款
  • win11打开图片
  • vbs win10
  • 盈余公积的提取基数
  • rsrcmtr.exe - rsrcmtr是什么进程 有什么用
  • PHP:pg_affected_rows()的用法_PostgreSQL函数
  • 预付工程施工款会计分录
  • 英国布莱顿霍夫怎么样
  • 金税盘不能清卡的原因
  • 商业汇票抵付前欠货款的分录
  • 坏账损失属于或有事项吗
  • php 跨域
  • [九]深度学习Pytorch-transforms图像增强(剪裁、翻转、旋转)
  • c语言中全局变量
  • 纳税人备案期限
  • 关税完税价格计算增值税
  • 微服务网关作用
  • java中map.entry
  • sql merge语句
  • 饲料加工企业可以转让吗
  • 投资收益收到的现金增加的原因
  • 企业自产自用的产品需要缴纳增值税吗
  • 稳岗补贴属于是什么补贴
  • sql 附加数据库
  • 企业期末预收账款怎么算
  • 公司没有销售收入
  • 库存现金日记账怎么填
  • 收到跨月的费用发票怎么入账
  • 退货回去需要把原包装保留吗
  • 亏本处理产品怎么做账
  • 消费税出口退税吗
  • 工资扣税是减去五险一金吗
  • 生产成本的会计科目分录
  • 以前年度费用科目入错 不影响以前年度利润的账务处理
  • 信用代码证过期了6年怎么办理
  • 个体户需要报税吗?需要报哪些税?
  • sql分组having
  • 一个关于数据库表中的各条记录
  • linux三个主要部分及功能
  • win7系统压缩包
  • centos7更改默认内核
  • win7打开游戏显示已停止工作
  • linux ifconfig命令详解
  • linux讲解
  • centos配置yum
  • linux怎么禁用用户
  • Android游戏开发读后感
  • 日亚海淘官网
  • jquery easyui开发指南
  • linux防火墙开启80端口视频
  • python爆破脚本
  • jquery中ajax跨域方法实例分析
  • python 数据结构 算法
  • 手把手教你把币从交易所提到钱包
  • javascript教学视频
  • 小规模纳税人收到增值税专用发票怎么办
  • 02112366电子税务局
  • 济南税务稽查局人员名单
  • uk开票软件如何赋码
  • 安庆税务局窗口电话
  • 成都税务二维码扫描
  • 税收分类分级管理后如何开展风险管理
  • 税控盘离线开票时间超限是怎么回事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设