Vue中ref和$refs的介绍以及使用方法示例


Posted in Vue.js onJanuary 11, 2021

前言

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。

ref介绍

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例

通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

<p ref="p">Hello</p>
<children ref="children"></children>
this.$refs.p
this.$refs.children

this.$refs介绍

this.$refs是一个对象,持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

注意: $refs只有在组件渲染完成后才填充,在初始渲染的时候不能访问它们,并且它是非响应式的,因此不能用它在模板中做数据绑定

注意:

当ref和v-for一起使用时,获取到的引用将会是一个数组,包含循环数组源

<template>
 <div>
 <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  arr: ['one', 'two', 'three', 'four']
 }
 },
 mounted() {
 console.log(this.$refs.myDiv)
 },
 methods: {}
}
</script>
 
<style lang="sass" scoped>
 
</style>

Vue中ref和$refs的介绍以及使用方法示例

实例(通过ref特性调用子组件的方法)

【1】子组件code:

<template>
 <div>{{msg}}</div>
</template>
 
<script>
export default {
 data() {
 return {
  msg: '我是子组件'
 }
 },
 methods: {
 changeMsg() {
  this.msg = '变身'
 }
 }
}
</script>
 
<style lang="sass" scoped></style>

【2】父组件code:

<template>
 <div @click="parentMethod">
 <children ref="children"></children>
 </div>
</template>
 
<script>
import children from 'components/children.vue'
export default {
 components: { 
 children 
 },
 data() {
 return {}
 },
 methods: {
 parentMethod() {
  this.$refs.children //返回一个对象
  this.$refs.children.changeMsg() // 调用children的changeMsg方法
 }
 }
}
</script>
 
<style lang="sass" scoped></style>

总结

到此这篇关于Vue中ref和$refs的介绍以及使用的文章就介绍到这了,更多相关Vue中ref和$refs使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
You might like
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python中方法链的使用方法
2016/02/23 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python验证码图片处理(二值化)
2019/11/01 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
后勤部长岗位职责
2013/12/14 职场文书
电子商务自荐书范文
2014/01/04 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
道路交通安全实施方案
2014/03/12 职场文书
文明村镇申报材料
2014/05/06 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
使用HttpSessionListener监听器实战
2022/03/17 Java/Android