什么是 ref 引用

1. 什么是 ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

可以简单理解为：ref能获取元素或组件对象，然后就能够使用这个对象进行操作，比如修改样式等。

下面我来打印验证一下，可以看到下面的结果

知道了ref的作用，关键是你得会怎么去使用，下面是方法：

2. 使用 ref 引用 DOM 元素

分两步

1.为DOM元素添加ref属性，后面写上名称，比如叫“hhh"

2.通过this就能够操作这个对象了

可以看到结果，点击按钮后，元素的样式被修改为了蓝色

3. 使用 ref 引用组件实例

上面是引用元素，下面咱们来引用组件

其实用法差不多

分两步

1.在要调用的组件上使用ref属性，后面加上名称，这次命名为counterRef

2.通过this来引用实例，这样就可以调用子组件上的 methods 方法

好了学到了这里，我们就已经知道了ref的作用，以及它的使用方法了

什么是 ref 引用相关推荐

vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
生命周期数据共享[父子-子父-兄弟]ref引用数组复习
目录一.组件的生命周期& 生命周期函数 1. 生命周期 & 生命周期函数 2.组件生命周期函数的分类 3.生命周期图示[重要] 二.组件之间的数据共享 1. 组件之间的关系 2. 父 ...
七、ref引用与数组的常用方法
一.ref 引用 1.1.什么是 ref 引用 ref 用来辅助开发者在不依赖于jQuery的情况下,获取 DOM 元素或组件的引用. 每个vue的组件实例上,都包含一个$refs对象,里面存储着对应 ...
Rust for Linux 源码导读 | Ref 引用计数容器原创
引子 2022 年,我们很可能会看到 Linux 内核中的实验性 Rust 编程语言支持成为主流.2021.12.6 早上发出了更新的补丁,介绍了在内核中处理 Rust 的初始支持和基础设施. 这次更 ...
【Vue】ref引用，插槽
一.ref 什么是ref? ref用来辅助开发者在不依赖于jQuery 的情况下,获取DOM元素或组件的引用. 每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用 ...
ref 引用(vue获取DOM元素）
ref 引用 jquery 牛逼简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
VUE3模板ref引用子组件或者子组件的方法
模板Refs 通过ref()函数还可以引用页面上的元素或组件使用步骤: 1.在setup()中创建一个ref对象并返回它 2.在页面上为元素添加ref属性,并设置属性值与创建的ref对象的名称相同 ...
React(8)-组件ref引用
目录 1.组件form 受控组件及其特点非受控组件及其特点模拟:简单受控组件表单 input两个方向绑定数据: 模拟:复杂(真实)受控组件表单(form里面有多种数据输入) 注意:handleCh ...
vue $ref 引用子组件方法时报undefine
说明: 关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的, 在初始渲染的时候你不能访问它们 - 它们还不存在! $refs 也不是响应式的,因此你不应该试图用它在模板中做数据 ...

什么是 ref 引用

什么是 ref 引用相关推荐

最新文章

热门文章