Vue中ref和$refs的介绍以及使用方法示例
作者:@Demi 发布时间:2023-07-02 17:00:10
标签:vue,ref,$refs
前言
在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>
实例(通过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>
总结
来源:https://blog.csdn.net/qq_38128179/article/details/88876060
0
投稿
猜你喜欢
- 本文实例为大家分享SQL SERVER数据库备份的具体代码,供大家参考,具体内容如下/** 批量循环备份用户数据库,做为数据库迁
- 最近在OpenCV-Python接口中使用cv2.findContours()函数来查找检测物体的轮廓。根据网上的 教程,Python&nb
- 一、分屏展示当你想同时看到多个文件的时候:右击标签页;选择 move right 或者 split vertical;效果:二、远程 Pyt
- 当用到socket来进行网络程序开发时,大多数情况下会遇到中文字符的发送与接收,这时若对发送的字符串用默认的方式进行处理,则一般会得到一堆乱
- 本文实例讲述了python判断字符串是否纯数字的方法。分享给大家供大家参考。具体如下:判断的代码如下,通过异常判断不能区分前面带正负号的区别
- 最近在学习Python3网络爬虫开发实践(崔庆才 著)刚好也学习到他使用代理爬取公众号文章这里,但是照着他的代码写,出现了一些问题。在这里我
- 提到分发请求,相信大多数人首先会想到Nginx,Nginx作为一种多功能服务器,不仅提供了反向代理隐藏主机ip的能力,还拥有简单的缓存加速功
- 假设我们有一个非常简单的Post模型,它将是一个图像及其描述,from django.db import modelsclass Post(
- 运行MySQL Server 5.0安装程序“setup.exe”,出现如下界面: 安装向导启动,按“Next”继续:
- 保护你的ASP页面的两种办法 有时候你只想让人们从你的站点来访问你的某些页面, 而不允许他们从其它站点的非法链接中到达这些页面。在你想保护的
- 一个3层嵌套列表mm=["a",["b","c",["inner&qu
- PyQtGraph是纯Python的,只是它底层调用的是PyQt,也就是Qt的Python封装,底层用C/C++语言开发的库,它是在PyQt
- win10 Python3.7安装keras深度学习集成包 TensorFlow 和Ubuntu下安装keras在win10下安装安装时必须
- VBSCRIPT中的日期,时间,星期函数很丰富,给我们使用带来了很大的方便,我个人使用最多的就是用now()来获取服务器的当前日期和时间。但
- 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解
- Anaconda 实际上是一个软件发行版,它附带了conda、Python和150多个科学包及其依赖项。其中,conda是一个开源的软件包管
- K近邻算法(或简称kNN)是易于理解和实现的算法,而且是你解决问题的强大工具。什么是kNNkNN算法的模型就是整个训练数据集。当需要对一个未
- 一、平稳序列建模步骤假如某个观察值序列通过序列预处理可以判定为平稳非白噪声序列,就可以利用ARMA模型对该序列进行建模。建模的基本步骤如下:
- itertools — 为高效循环而创建迭代器的函数accumulate(iterable: Iterable, fun
- 我就废话不多说了,大家还是直接看代码吧!import pymysqlimport pandas as pddef con_sql(db,sq