vue中的ref和$refs的使用
作者:随她 时间:2024-05-13 09:08:44
ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
ref 有三种用法:
1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素
2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
普通的DOM元素上使用
<div id="app7">
<input type="text"ref="TEXT"/ >
<button @click="add">添加</button>
</div>
var app7=new Vue({
el:"#app7",
data:{
},
methods:{
add:function(){
console.log(this.$refs);
}
}
})
子组件上使用
<div id="app7">
<aaa ref=inputText></aaa>
<input type="text"ref="TEXT" >
<button @click="add">添加</button>
</div>
Vue.component('aaa',{
template:"<div>我是一个组件</div>"
})
var app7=new Vue({
el:"#app7",
data:{
},
methods:{
add:function(){
console.log(this.$refs.inputText);
console.log(this.$refs);
}
}
})
var aaa=app7.$refs.inputText;
//console.log(aaa);
//console.log(aaa.$el.innerText);
$refs:一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例
注意:$refs只会在组件渲染完成之后生效,并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
来源:https://segmentfault.com/a/1190000017098817
标签:vue,ref,$refs
0
投稿
猜你喜欢
什么是gzip,人肉gzip?
2008-11-20 13:01:00
mysql随机查询若干条数据的方法
2024-01-20 17:41:02
Python 把序列转换为元组的函数tuple方法
2022-11-11 15:06:58
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2024-05-13 09:13:16
PHP中让json_encode不自动转义斜杠“/”的方法
2023-07-12 22:44:58
mysql锁表和解锁语句分享
2024-01-13 12:08:36
typescript常见高级技巧总结
2024-05-08 10:10:10
vue-admin-element项目突然就起不来了的解决
2023-07-02 16:37:58
python实现杨氏矩阵查找
2021-09-28 15:03:26
利用PHP函数计算中英文字符串长度的方法
2023-10-13 16:35:46
python中为main方法传参问题
2023-05-20 04:48:12
商业价值与用户价值的平衡
2008-12-10 18:42:00
mysql代码执行结构实例分析【顺序、分支、循环结构】
2024-01-21 23:18:40
ASP利用Google实现在线翻译功能
2010-03-07 17:28:00
一文带你搞懂JS中导入模块import和require的区别
2023-07-21 03:24:18
javascript浮点数计算的bug
2009-12-06 11:43:00
sql ntext数据类型字符替换实现代码
2011-09-30 11:08:00
基于python使用Pillow做动态图在图中生成二维码以及图像处理
2022-12-29 16:33:03
做购物车系统时利用到得几个sqlserver 存储过程
2024-01-13 10:05:48
php实现生成验证码实例分享
2024-05-02 17:13:26