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使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
短波的认识
2021/03/01 无线电
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
json原理分析及实例介绍
2012/11/29 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Python中使用中文的方法
2011/02/19 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
python实现同一局域网下传输图片
2020/03/20 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
一些.net面试题
2014/10/06 面试题
施工安全协议书
2013/12/11 职场文书
员工担保书范本
2015/09/22 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Python学习之迭代器详解
2022/04/01 Python
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL