位置: 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的方式)

  • 外贸企业出口货物
  • 扶贫入股分红能领多久
  • 资产负债表第二季度年初余额怎么填
  • 退休职工怎么填写单位吗
  • 冲红退税流程
  • 年金个税税率表
  • 电子发票作废了还能恢复吗
  • 年末结转增值税之后增值税有余额嘛
  • 建筑业的进项税怎么抵扣
  • 不征税项目可以抵扣进项税吗
  • 公司办理食品许可证
  • 租赁的房子
  • 长期股权投资的初始计量
  • 备用金被盗怎么找回来
  • 工会经费滞纳金税率
  • 在建工程非应税项目有哪些?
  • 周年庆典布置现场
  • 开办生产建设项目
  • 单位报销托儿费
  • 坏账准备核销和转销的区别
  • 怎样申请退税费
  • 出租包装物和出借包装物的摊销额
  • 钱打到对公账户
  • 公司有好多没有股份的人
  • 广告公司进项税有哪些
  • 银行承兑汇票如何承兑分录
  • 公司章程签署
  • 公司委托第三方缴纳社保合法吗
  • ftp pwd命令
  • 单位撤销现金余额的规定
  • php获取文件名
  • timit数据集
  • 人民币账户购汇支付
  • 贷款减值准备什么科目
  • 购买办公用品怎样写备注
  • 【综述】分子预训练模型综述
  • win11硬件加速gpu计划怎么关
  • python猜数字1到1000代码
  • 公积金提取条件资料
  • python tkinter entry用法
  • 国家税务总局就是国税局吗?
  • 哪些进项税额不能抵扣
  • sql server临时表的生命周期
  • 旅游发票可以做差旅费吗
  • 收到保险公司赔款
  • 职工薪酬费用属于什么费用
  • 账户利息计入什么科目
  • 发票开多了如何做凭证?
  • 商品流通企业如何控成本
  • 增值税稽查补交税会计处理
  • sqlserver日期计算年龄
  • ubuntu和window双系统
  • mac 邮箱
  • 详细介绍的英文
  • xp设置程序开机启动
  • mac浏览器显示不全
  • win10虚拟机无法安装
  • linux bin和sbin
  • 怎么改电脑windows7
  • nero recode
  • keyemain.exe是什么
  • win8双系统怎么切换
  • windows7word文档打不开怎么办
  • 前端防止sql注入
  • 完美解决雷电模拟器卡顿
  • shell监控http脚本
  • 如何使用form表单
  • js == ===区别
  • jquery内容过滤选择器有哪些
  • Javascript字符串对象函数
  • jquery深拷贝
  • python的介绍
  • 如何查政审合不合格
  • 哪个机场离东莞樟木头最近
  • 广州市地方税务局官网
  • 个人所得税预扣预缴办法
  • 上海税务开户
  • 车辆大本怎么办理
  • xboxone登录显示密码错误
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设