vue基本使用--refs获取组件或元素的实例
作者:晨曦之光11 时间:2024-05-02 16:35:20
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)
使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取
注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods
添加ref属性
<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>
获取注册过 ref 的所有组件或元素
methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html样式
console.log(this.$refs.ho.msg);// 获取组件数据
console.log(this.$refs.ho.test);// 获取组件的方法
}
}
来源:https://blog.csdn.net/qq_21796899/article/details/78752703
标签:vue,refs,组件,元素
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php将文件夹打包成zip文件的简单实现方法
2024-05-11 09:48:14
asp使用正则自动解析图片地址并保存
2007-08-17 11:29:00
![](https://img.aspxhome.com/file/UploadPic/up/2007081711544653.jpg)
服务器安装MySQL教程及注意事项
2008-11-11 12:12:00
FSO读取BMP,JPG,PNG,GIF图像文件信息的函数
2007-08-04 09:56:00
Go语言利用Unmarshal解析json字符串的实现
2024-05-09 09:54:25
几个你不知道的技巧助你写出更优雅的vue.js代码
2024-05-13 09:14:39
![](https://img.aspxhome.com/file/2023/0/126420_0s.png)
基于Django实现日志记录报错信息
2021-06-22 06:24:23
详解Spring Boot中使用Flyway来管理数据库版本
2024-01-14 21:04:12
Python 调用 ES、Solr、Phoenix的示例代码
2023-10-03 04:52:57
MySQL流程控制IF()、IFNULL()、NULLIF()、ISNULL()函数的使用
2024-01-13 19:07:17
解析python的局部变量和全局变量
2023-08-23 18:17:01
pandas按若干个列的组合条件筛选数据的方法
2023-10-27 03:49:07
![](https://img.aspxhome.com/file/2023/6/109566_0s.jpg)
Python利用psutil实现获取硬件,网络和进程信息
2023-08-12 18:37:44
![](https://img.aspxhome.com/file/2023/1/107581_0s.jpg)
python实现从尾到头打印单链表操作示例
2021-12-20 00:09:32
python实现三种随机请求头方式
2022-01-17 17:06:39
![](https://img.aspxhome.com/file/2023/5/81575_0s.png)
不用Global.asa也能实现统计在线人数吗?
2009-10-29 12:28:00
全网最详细的vscode基础教程
2022-09-22 08:43:05
![](https://img.aspxhome.com/file/2023/2/132312_0s.jpg)
python 如何求N的阶乘
2023-11-01 15:24:46
webpack5的entry和output配置小白学习
2024-04-30 09:52:08
Python 打印自己设计的字体的实例讲解
2021-04-24 14:45:21