Vue中 $ref 的用法
2024-09-02 03:50:38
说明: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);// 获取组件的方法
}
}
最新文章
- python pickle 序列化类
- wpf,ListBox,ScrollViewer内容向左向右偏移指定位置
- BZOJ1946 : [Ceoi2006]ANTENNA
- 多线程之ReentrantReadWriteLock
- css ie7中overflow:hidden失效问题及解决方法
- Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)
- Codeforces 364
- 采用Java语言如何实现高速文件复制?
- 常用Nagios配置命令
- 利用PCA降维
- 一丶HTML介绍
- POJ--3349 Snowflake Snow Snowflakes(数字hash)
- html : 九宫格(响应式)
- Cobalt Strike 学习
- iOS runtime执行时具体解释
- 转载 C++实现的委托机制
- L146 Space Station Hole Cause Will Be Determined
- day4(带)
- HDU 6065 RXD, tree and sequence (LCA DP)
- kkpager的改进,Ajax数据变化但是页码不变的问题,kkpagerajax
热门文章
- 闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题
- 爬虫基础——HTTP基本原理
- SQLServer 2008 已成功与服务器建立连接,但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。
- 爬虫之scrapy
- C++_注释、枚举、typedef
- mysql 线程操作
- 关于background-size 的一点小坑
- 在树莓派3B、Ubuntu 18.04关闭板载Wifi、蓝牙
- 在Ubuntu上升级SQLite,并让Python使用新版SQLite
- 基于Ubuntu的ESP32平台搭建