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

  • 什么情况用已交税金
  • 一般纳税人什么条件
  • 管道燃气工程设计方案
  • 资产处置损益属于当期损益吗
  • 绿化税票多少税率
  • 离岸外包和国内外包区别
  • 小规模纳税人季报还是月报?
  • 财付通转账手续费多少
  • 微商怎么收税
  • 非居民企业转让财产所得税
  • 支付违约金未取得正规发票能不能在税前列支
  • 企业所得税研发费用怎么填
  • 公司股东投资是负债吗
  • 企业所得税季度申报时间
  • 增值税和实际缴税不符
  • 变更银行手机号需要去银行吗
  • 10个点的发票税点开6个点专票
  • 免税单位取得增值税发票
  • 现代服务业要满足什么条件才转一般纳税人
  • 园林绿化税收减免政策
  • 滞留发票是什么意思
  • 核定征收取消了
  • 亏损企业所得税汇算清缴怎么做
  • 应交税费应交增值税明细科目设置
  • 不同业务的进项税额抵扣
  • 个人独资企业免费刻章吗
  • synchost.exe - synchost是什么进程 有什么作用
  • 营业外支出是否需要发票
  • 劳务服务包括哪些范围
  • 预收外汇如何结汇
  • 公司缴纳的公积金什么时候到账
  • 下岗职工生活费最多发多少个月
  • 公司连续几年不向股东分配利润
  • 搭建自己的php mvc框架
  • 企业购入设备涉及的税种
  • thinkphp框架入门
  • 前端毕业设计项目
  • 企业清算的会计科目
  • web前端开发期末试题及答案
  • docker-p
  • php中定义函数
  • 孪生神经网络 计算相似度
  • 使用灭火器人要站在上风口还是下风口
  • 会引起所有者权益总额变动的是
  • 受托代销的分录
  • 发票超额怎么办
  • 收入总额是什么意思
  • access导入到mysql
  • 工会经费和残保金计入什么科目
  • 业务招待费属于什么会计科目
  • 以无形资产换入固定资产发生的净损益
  • 其他应付款在现金流量表
  • 支付大型设备税率是多少
  • 收到采购免费赔偿怎么办
  • 分配股利需要缴纳个税吗
  • 房地产开发企业销售自行开发的房地产项目
  • 固定资产报废如何记账
  • 管理费用和销售费用都有职工薪酬
  • 个体户不交税会判刑吗?
  • windowns vista
  • centos怎么查看文件
  • FreeBSD mpd VPN服务器安装步骤
  • win7如何升级win11系统
  • 电脑开机显示xp后无反应
  • Linux系统SCSI磁盘扫描机制解析及命令详细介绍
  • windows8启动管理器
  • win10系统电脑开机密码在哪里设置
  • sublime text配置node.js调试(图文教程)
  • javascript+css3开发打气球小游戏完整代码
  • JavaScript 和 Java 的区别浅析
  • 备份多个数据库
  • unity rpg插件
  • domReady的实现案例
  • unity射击游戏完整案例
  • jquery示例
  • android简单项目及代码
  • 非贸付汇代扣代缴增值税可以抵扣吗
  • 山西省税务局政审县级还是市级的
  • 特殊工种作业人员
  • 驻国家税务总局纪检组副组长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设