位置: IT常识 - 正文

Vue获取子组件实例对象 ref 属性(vue子组件获取dom元素的方法)

编辑:rootadmin
Vue获取子组件实例对象 ref 属性

推荐整理分享Vue获取子组件实例对象 ref 属性(vue子组件获取dom元素的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 获取子组件,vue获取子组件实例对象,vue子组件获取props,vue子组件调用子组件的方法,vue获取子组件实例对象,vue获取子组件实例对象,vue子组件获取dom元素的方法,vue获取子组件实例对象,内容如对您有帮助,希望把文章链接给更多的朋友!

在 Vue 中推荐使用 ref 属性获取 DOM 元素,这种方式可以提高性能。

如果将 ref 属性使用在组件上,那么返回的就是这个组件的实例对象。

使用方式:`<p ref="xxx">` 或 `<Banner ref="xxx">` 。

获取方式:this.$refs.xxx

1.原生 JS 获取 DOM 元素【不推荐】:

<template> <div> <h2>主页</h2> <p id="title">{{ msg }}</p> <button @click="getDOM">点击获取DOM元素</button> </div></template><script>export default { name: 'Home', data() { return { msg: "哇哈哈哈!" } }, methods: { getDOM() { // 通过原生 JS 获取 DOM 元素 console.log(document.getElementById("title")); } }}</script>

Vue获取子组件实例对象 ref 属性(vue子组件获取dom元素的方法)

2. 通过 ref 属性获取 DOM 元素【推荐】:

<template> <div> <h2>主页</h2> <p ref="title">{{ msg }}</p> <button @click="getDOM">点击获取DOM元素</button> </div></template><script>export default { name: 'Home', data() { return { msg: "哇哈哈哈!" } }, methods: { getDOM() { // 通过 ref 属性获取 DOM 元素 console.log(this.$refs.title); console.log(this); } }}</script>

注:ref 属性就是 id 的替代者,会将绑定 ref 属性的元素添加到 Vue 实例对象上,可以通过 $refs 属性获取这个 DOM 元素。

 

 获取子组件实例对象:

首先需要在 components 文件夹内创建一个子组件。例如:Banner.vue 组件。

<template> <div> <h2>轮播图</h2> <p>图片数量:{{ num }}</p> </div></template><script>export default { name: "Banner", data() { return { num: 5 } }}</script>

然后在 Home.vue 页面引入 banner.vue 组件。并给组件绑定 ref 属性。

<template> <div> <h2>主页</h2> <p ref="title">{{ msg }}</p> <button @click="getDOM">点击获取DOM元素</button> <Banner ref="ban"></Banner> </div></template><script>import Banner from "../components/Banner";export default { name: 'Home', components: { Banner }, data() { return { msg: "哇哈哈哈!" } }, methods: { getDOM() { // 通过 ref 属性获取子组件实例对象 console.log(this.$refs.ban); console.log(this.$refs.ban.num); } }}</script>

注:如果在组件上绑定 ref 属性,那么获取到的就是这个组件的实例对象。并且可以通过这个对象,使用子组件内的数据和方法,或传递参数。

原创作者:吴小糖

创作时间:2023.3.24

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

上一篇:JS 异步编程方法:6种方案(js异步解决方案)

下一篇:相机与IMU标定教程(什么叫相机标定)

  • 微信怎么设置好友专属提示音(微信怎么设置好友打不进来视频)

    微信怎么设置好友专属提示音(微信怎么设置好友打不进来视频)

  • qq转发可以屏蔽部分人吗(qq转发怎么不让别人看见)

    qq转发可以屏蔽部分人吗(qq转发怎么不让别人看见)

  • 华为p40pro微信视频支持美颜功能吗(华为p40微信视频聊天)

    华为p40pro微信视频支持美颜功能吗(华为p40微信视频聊天)

  • 三星note10+支持双模5g吗(三星note10+支持多少w快充)

    三星note10+支持双模5g吗(三星note10+支持多少w快充)

  • 苹果11时间显示是蓝色(苹果11时间显示设置)

    苹果11时间显示是蓝色(苹果11时间显示设置)

  • 隔空投送点不动蓝色的(隔空投送不动了)

    隔空投送点不动蓝色的(隔空投送不动了)

  • 爱奇艺传视频怎么互传(2021最新版爱奇艺怎么传片)

    爱奇艺传视频怎么互传(2021最新版爱奇艺怎么传片)

  • 抖音显示已读是什么意思(抖音显示已读是苹果手机吗)

    抖音显示已读是什么意思(抖音显示已读是苹果手机吗)

  • 春晚直播可以投屏吗(春晚直播投屏到电视上)

    春晚直播可以投屏吗(春晚直播投屏到电视上)

  • dou上热门支付失败怎么办(抖音上热门支付失败是什么意思)

    dou上热门支付失败怎么办(抖音上热门支付失败是什么意思)

  • 支持10代cpu的主板(支持10代的主板)

    支持10代cpu的主板(支持10代的主板)

  • 小红书不能复制文字吗(小红书不能复制图片吗)

    小红书不能复制文字吗(小红书不能复制图片吗)

  • 3dmax切换视图快捷键(3dmax切换视角)

    3dmax切换视图快捷键(3dmax切换视角)

  • 为什么qq修改不了备注名(为什么qq修改不了实名认证)

    为什么qq修改不了备注名(为什么qq修改不了实名认证)

  • 打开dns加密有啥用(打开dns加密有啥用处)

    打开dns加密有啥用(打开dns加密有啥用处)

  • 华为nova3i和nova3手机壳通用吗(华为nova3i和nova4哪个好)

    华为nova3i和nova3手机壳通用吗(华为nova3i和nova4哪个好)

  • 8pin显卡能直插6pin么(显卡是8pin供电可以插6pin吗)

    8pin显卡能直插6pin么(显卡是8pin供电可以插6pin吗)

  • 进程何时占用CPU是由什么确定的(进程占用的内存)

    进程何时占用CPU是由什么确定的(进程占用的内存)

  • vivo云相册在哪里打开(vivox21云相册在哪)

    vivo云相册在哪里打开(vivox21云相册在哪)

  • qq注销后名字变成了什么(qq号注销后网名是什么样子)

    qq注销后名字变成了什么(qq号注销后网名是什么样子)

  • 怎样屏蔽钉钉管理助手(钉钉怎样屏蔽一个人)

    怎样屏蔽钉钉管理助手(钉钉怎样屏蔽一个人)

  • 抖音注销后粉丝还在吗(抖音注销后粉丝还能看到我吗)

    抖音注销后粉丝还在吗(抖音注销后粉丝还能看到我吗)

  • 抖音怎么拍2个角色切换(抖音怎么拍个人视频)

    抖音怎么拍2个角色切换(抖音怎么拍个人视频)

  • airports怎么调音量(airportspro调音量)

    airports怎么调音量(airportspro调音量)

  • 华为jkmaloob什么型号(华为jkmaloob是什么型号手机)

    华为jkmaloob什么型号(华为jkmaloob是什么型号手机)

  • vivox21怎么设置双系统(vivox21怎么设置家长模式)

    vivox21怎么设置双系统(vivox21怎么设置家长模式)

  • zmore命令  查看压缩文件(用more命令查看文件内容)

    zmore命令 查看压缩文件(用more命令查看文件内容)

  • 增值税发票验真伪怎么验
  • 哪些占用土地的行为不征收耕地占用税?
  • 外地预缴税金
  • 小规模纳税人购买原材料会计分录
  • 工程施工科目有没有伙食费啊
  • 转入公账怎么做账
  • 业务员报销差旅费会计分录怎么做
  • 开给个人的普票购买方怎么写
  • 股份制改造而发生的资产评估增值税法规定
  • 污水处理企业如何捕捉碳中和减少了的碳足迹
  • 银行汇票多余金额会计分录
  • 或有负债怎么入账
  • 支付利息的诉讼请求
  • 购买空调的报销单怎么写
  • 酒店业小规模纳税人可以享受2023年应纳税额抵减政策吗
  • 新成立的分公司怎么样
  • 一般纳税人开技术服务发票
  • 本月计错多发的工资可以不交个税
  • 财政返还政策
  • 高速公路抵税
  • 附加税税率计税依据
  • 单利和复利的计算区别
  • 个税申报汇总表怎么填写
  • 建筑行业挂靠什么意思
  • 小微企业工会
  • 厂房转让会计分录
  • 建筑行业成本预算和施工方案哪个更有含金量
  • 单位为员工支付医疗费
  • 期间费用核算内容不应该包括
  • 小规模纳税人个税怎么申报
  • 外观专利的价值
  • mac截图如何保存到照片
  • 如何在windows10搜索文件
  • 税额差异会计分录
  • php字符串定义
  • 未履行的应税合同缴纳印花税
  • vue中使用nodejs
  • 空调维修费进什么会计科目
  • thinkphp5教程
  • 红嘴牛文鸟图片
  • php引用传值
  • 其他收益和其他收入的区别
  • 出口退税哪些税不退
  • 存续分立会计处理原则
  • 帝国cms怎么用
  • 还未进行抄报税
  • 固定资产报废计入资产处置损益吗
  • access ms
  • 公司缴纳的残保金是什么
  • 公允价值变动损益在利润表哪里
  • 培训公司收取培训费用合法吗
  • 买房的社保指的是什么
  • 利润分配未分配利润是净利润吗
  • 管理费用应该如何分摊 dcf
  • 报销差旅费大于预借差旅费会计分录
  • 计提固定资产折旧怎么做会计科目
  • 小规模企业开具增值税专用发票
  • 取得异常凭证企业所得税调整
  • 按最低标准买社保30年退休后每个月领多少钱
  • 公司资产业务
  • 备查账一般采用什么账簿
  • 全面解析皮炎
  • wermgr.exe是什么进程
  • windows2000修改ip
  • 苹果macbook怎么切换系统
  • mac合盖不休眠怎么办
  • win10qq在哪里启动
  • linux必会的20种服务
  • win7一开机就弹窗
  • win10预览设置
  • python函数详解
  • js设置窗口大小
  • 分享一些常用的文件
  • wmic命令详解
  • 海关编码更新
  • 上海社保联网
  • 税收公司法人有风险么
  • 矿产资源税税率2020年
  • 纳税服务理念创新不足
  • 企业需要缴纳哪些费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设