$refs与ref是什么

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
使用：在 HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

<div id="app"><input type="text" ref="input1"/><button @click="add">添加<button>
</div>
复制代码
<script>
new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗}}
})
</script>

因为在原生里获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
- 调用方式：this.$refs.input1
- 作用：减少DOM节点的消耗

Vue Vue项目里面使用的$refs与$ref是什么意思，有什么用？相关推荐

vue音乐项目歌手详情页小结
技术栈 1,vue 2,vuex 3,vue-router(子路由) 需求分析 1)歌手列表点击歌手会跳转到下级页面歌手详情页,歌手详情页由四个部分组成歌手图片返回按钮:点击返回歌手tab页随机 ...
Vue 2 项目和插件使用
目录 Less ElementUI CDN NPM 完整引入按需引入全局配置 Vant CDN NPM 自动按需引入 (推荐) 手动按需引入导入所有组件 vuex(store) iconfont ...
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
文章目录最好使用视频上的账号密码,13700000000 密:111111 最新服务端接口地址:http://gmall-h5-api.atguigu.cn 脚手架使用 1.创建项目 2.脚手架默认 ...
SpringBoot+vue旅游项目总结
Springboot+vue旅游项目小总结此项目为一个springboot+vue入门级小项目,视频地址为:https://www.bilibili.com/video/BV1Nt4y127Jh 业 ...
Vue——Mall项目初始化及登录模块（九）
一.Mall项目简介客户使用的业务服务:PC端前台采用传统html开发,(小程序,移动web,移动app)采用uniapp开发管理员使用的业务服务:PC端后台管理端采用vue脚手架开发 Mall后 ...
B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
Vue+Element 项目实战（一）
目录相关资料今日目标 1.电商业务概述 2.项目初始化(必须先安装node.js) 3.码云相关操作 4.配置后台项目 5.实现登录功能补充相关资料项目所用到的资源点我下载项目源码 ht ...
vue.js项目中配置mapbox可视化地图api
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager,之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申 ...
vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...

Vue Vue项目里面使用的$refs与$ref是什么意思，有什么用？

$refs与ref是什么

Vue Vue项目里面使用的$refs与$ref是什么意思，有什么用？相关推荐

最新文章

热门文章