位置: 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标定教程(什么叫相机标定)

  • 微信视频号视频怎么下载(微信视频号视频下载到本地)

    微信视频号视频怎么下载(微信视频号视频下载到本地)

  • ios13快捷指令可以添加门禁卡吗(快捷指令ios13 使用教程)

    ios13快捷指令可以添加门禁卡吗(快捷指令ios13 使用教程)

  • 正在进行更新27不动了(正在进行更新23%很久)

    正在进行更新27不动了(正在进行更新23%很久)

  • Word怎么删除页眉横线(word怎么删除页码)

    Word怎么删除页眉横线(word怎么删除页码)

  • 微信视频通话怎么美颜

    微信视频通话怎么美颜

  • 打印处理器不存在怎么解决(打印处理器不存在是什么意思)

    打印处理器不存在怎么解决(打印处理器不存在是什么意思)

  • 闲鱼怎么显示全新红色标签(闲鱼怎么展示)

    闲鱼怎么显示全新红色标签(闲鱼怎么展示)

  • 抖音观看历史在哪里(抖音观看历史在哪里打开最多保存多久视频)

    抖音观看历史在哪里(抖音观看历史在哪里打开最多保存多久视频)

  • 拼多多成立时间(拼多多成立时间是哪一年)

    拼多多成立时间(拼多多成立时间是哪一年)

  • 腾讯视频验证码怎么输都是错的(腾讯视频验证码登录在哪里)

    腾讯视频验证码怎么输都是错的(腾讯视频验证码登录在哪里)

  • 显示正在打印但是不动(显示正在打印但是打印不出来)

    显示正在打印但是不动(显示正在打印但是打印不出来)

  • 荣耀20i处理器(荣耀20i处理器是什么型号)

    荣耀20i处理器(荣耀20i处理器是什么型号)

  • 番茄小说怎么提现不了(番茄小说怎么提取文字)

    番茄小说怎么提现不了(番茄小说怎么提取文字)

  • 联想小新笔记本摄像头不能用怎么回事(联想小新笔记本电脑黑屏打不开怎么办)

    联想小新笔记本摄像头不能用怎么回事(联想小新笔记本电脑黑屏打不开怎么办)

  • 如何一键取消全部隐藏(如何一键取消全部隐藏窗口)

    如何一键取消全部隐藏(如何一键取消全部隐藏窗口)

  • 微信封群是什么状态(微信封群是什么原因)

    微信封群是什么状态(微信封群是什么原因)

  • 多媒体计算机常用的声音输入设备是(多媒体计算机常用的声音输入设备)

    多媒体计算机常用的声音输入设备是(多媒体计算机常用的声音输入设备)

  • 什么是公开版手机(什么是公开版手机型号)

    什么是公开版手机(什么是公开版手机型号)

  • word横向设置(word横向设置居中)

    word横向设置(word横向设置居中)

  • 抖音发布了还能剪切吗(抖音发布了还能删除吗)

    抖音发布了还能剪切吗(抖音发布了还能删除吗)

  • vivo x20plus防水吗(vivox21手机防水性能好吗)

    vivo x20plus防水吗(vivox21手机防水性能好吗)

  • 华为移动服务可以卸载吗(华为移动服务是干什么的可以删除么)

    华为移动服务可以卸载吗(华为移动服务是干什么的可以删除么)

  • 一加7pro触控采样率(一加七多点触控)

    一加7pro触控采样率(一加七多点触控)

  • 华为al00a什么型号(华为手机al00什么型号)

    华为al00a什么型号(华为手机al00什么型号)

  • 移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

    移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

  • 苹果8p指纹坏了能修吗(苹果8p指纹坏了怎么解锁)

    苹果8p指纹坏了能修吗(苹果8p指纹坏了怎么解锁)

  • 苹果手机自启动管理在哪(苹果手机自启动管理怎么关)

    苹果手机自启动管理在哪(苹果手机自启动管理怎么关)

  • mac删除快捷键(苹果mac删除快捷键)

    mac删除快捷键(苹果mac删除快捷键)

  • 如何制作动图(微信如何制作动图)

    如何制作动图(微信如何制作动图)

  • 织梦DEDECMS添加或修改文章出现空白解决办法(织梦怎么新建页面)

    织梦DEDECMS添加或修改文章出现空白解决办法(织梦怎么新建页面)

  • 价外税怎么理解
  • 应交税费是什么科目
  • 一般纳税人公司抵扣
  • 申报无票收入次月红冲有没有风险
  • 基本户的利息和本金比例
  • 特殊性税务处理所得税怎么算
  • 个人所得税申报密码如何设置
  • 指定会计科目是
  • 专票红冲账务处理
  • 商业银行委托贷款期限
  • 持续经营损益怎么算
  • 日常生活中各种仪式
  • 农产品收购发票上的买价含税吗
  • 税金及附加包括所得税费用吗
  • 内账价税分离余额怎么处理
  • 不需要抵扣的怎么直接进费用
  • 为什么增值税普通发票不能抵扣
  • 进项税额加计抵减如何申报
  • 外包的人力费用包括哪些
  • 流动资产的损失计入哪里
  • 个税上月没有申报当月可以补报么
  • 对公账户长期不用怎么收费
  • 所得税汇算清缴截止日期
  • 差额增值税计算公式
  • 华为mate40怎么打开开发者选项
  • 个人劳动供给曲线图
  • 已抵扣的固定资产进项税转出如何处理
  • 收到厂家返利怎么做分录
  • 印花税计税依据及计算方式
  • 弥补以前年度亏损怎么填申报表
  • vue 拖拽到目标区域
  • 固定资产财产损失的账务处理
  • win10怎么投影到手机
  • 补缴房产税土地使用税怎么算
  • 建筑业挂靠经营行为有什么涉税风险?
  • 小程序自定义tabbar创意动画
  • 营业外收入不计入所有者权益吗
  • 房屋权属变更什么意思
  • chrome浏览器清除数据
  • gpt3 api
  • OpenAI Translator | 基于ChatGPT API全局翻译润色解析插件
  • 【历史上的今天】3 月 29 日:“机器人三定律”问世;电脑动画首次获得奥斯卡;Caldera Linux 沉浮史
  • acpi disabled
  • 现代服务印花税税率
  • 货款收不回来会计分录
  • 涉税金额是指金额还是税额
  • mysql嵌套语句
  • 劳务派遣的开票税点是多少
  • 收到境外企业顾问费
  • 债权投资减值对股票影响
  • 农机免税发票能抵扣吗
  • 一般纳税人简易计税方法适用情形
  • 收到加工费怎么做账务处理分录
  • 建筑施工中的合格是指
  • 债券清算原则
  • 预付下个月租金分录
  • 商业承兑汇票提示付款流程
  • 企业利润分为四个方面
  • 个体工商户的公章丢了怎么办
  • 利用的英文
  • mysql数据库主键怎么设置
  • linux系统硬盘分区
  • windowsxp的安装方法
  • linux-c
  • lsaass.exe
  • 升级win10系统后无法联网的三种解决方法
  • bootstrap 组件库
  • node stream原理
  • app的文件名
  • selenium 与 chrome 进行qq登录并发邮件操作实例详解
  • 批处理 leq
  • 使用粗盐热敷十大危害
  • python爬虫详解
  • c 获取文件md5
  • jquery接收后端数据
  • android 启动service
  • js轮播图视频教程
  • 个人取得抽奖,购车抵用,需要缴纳个人所得税吗
  • 税务非正常户转正常户的申请报告
  • 个人的房产出租征收什么税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设