当前位置: 首页 > news >正文

关于 vue3 模板引用

文章目录

  • 前言
  • 1.访问模板引用
  • 2.v-for中的模板引用
  • 3.组件上的ref


前言

如果我们需要直接访问组件中的底层DOM元素,可使用vue提供特殊的ref属性来访问


1.访问模板引用

  1. 在视图元素中采用ref属性来设置需要访问的DOM元素
    a. 该ref属性可采用字符值的执行设置
    b. 该ref属性可采用v-bind:或:ref的形式来绑定函数,其函数的第一个参数则为该元素
  2. 如果元素的ref属性值采用的是字符串形式
    a. 在选项式 API JS中,可通过this.$refs来访问模板引用
    b. 在组合式 API JS中,我们需要声明一个同名的ref变量,来获得该模板的引用

访问模板引用【选项式】

<script>
export default {data: () => ({accountEl: null,passwordEl: null}),methods: {changeAccountInputStyle() {this.accountEl = this.$refs.account // 获取账号输入框的 DOMconsole.log(this.accountEl)this.accountEl.style = "padding: 15px"this.accountEl.className = "rounded"this.accountEl.focus()},passwordRef(el) { this.passwordEl = el  // el 元素是密码输入框},changePasswordInputStyle() {console.log(this.passwordEl) console.log(this.$refs) // 函数式声明的 ref,不会在this.$refs中获取this.passwordEl.style = "padding: 15px"this.passwordEl.className = "rounded"this.passwordEl.focus()},}
}
</script><template><!-- ref 字符串值形式 -->账号输入框:<input type="text" ref="account"><button @click="changeAccountInputStyle">改变账号输入框的样式</button><hr><!-- ref 函数形式:元素渲染后,会立即执行该函数 -->密码输入框:<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

访问模板引用【组合式】

<script setup>
import { ref } from 'vue';// 账号输入框
let account = ref(null) // ref 变量名和账号输入框中的 ref 属性值一样function changeAccountInputStyle() {console.log(account.value)account.value.style = 'padding: 10px'account.value.className = 'rounded'account.value.focus()
}// ------------------------------------------------------------------------// 密码输入框元素
let passwordEl = ref(null)function passwordRef(el) {passwordEl.value = el // el 元素是密码输入框
}function changePasswordInputStyle() {console.log(passwordEl.value)passwordEl.value.style = 'padding: 10px'passwordEl.value.className = 'rounded'passwordEl.value.focus()
}
</script><template><!-- ref 字符串值形式 -->账号输入框:<input type="text" ref="account"><button @click="changeAccountInputStyle">改变账号输入框的样式</button><hr><!-- ref 函数形式:元素渲染后,会立即执行该函数-->密码输入框:<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

2.v-for中的模板引用

当在v-for中使用模板引用时:

  1. 如果ref值是字符串形式,在元素被渲染后包含对应整个列表的所有元素【数组】
  2. 如果ref值是函数形式,则会每渲染一个列表元素则会执行对应的函数【不推荐使用】

注意:需要v3.2.25及以上版本

列表渲染指令中的模板引用【选项式】

<script>
export default {data: () => ({books: [{ id: 1, name: '红楼梦' },{ id: 2, name: '三国演义' },{ id: 3, name: '水浒传' },{ id: 4, name: '西游记' }],students: [{ id: 1, name: 'Jack' },{ id: 2, name: 'Annie' },{ id: 3, name: 'Tom' }]}),methods: {changeBookListStyle() {console.log(this.$refs.bookList)this.$refs.bookList[2].style = 'color: red'},studentsRef(el) {console.log(el)}}
}
</script><template><ul><!-- 如果 ref 值是字符串形式,在元素被渲染后包含对应整个列表的所有元素【数组】 --><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul><button @click="changeBookListStyle">点我查看 bookList </button><hr><!-- 如果ref值是函数形式,则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 --><ul><li v-for="s in students" :key="s.id" :ref="studentsRef">{{ s.name }}</li></ul>
</template>

列表渲染指令中的模板引用【组合式】

<script setup>
import { onMounted, ref } from 'vue';// 书本
let books = ref([{ id: 1, name: '海底两万里' },{ id: 2, name: '骆驼祥子' },{ id: 3, name: '老人与海' },{ id: 4, name: '安徒生童话' },
])let bookList = ref(null)onMounted(() => {console.log(bookList.value); // 获取引用的 DOM 对象,并打印,发现那么是数组,bookList.value[2].className = 'error'
})
</script><template><ul><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul>
</template><style>
.error {border: 1px solid red;
}
</style>

3.组件上的ref

模板引用也可以被用在一个子组件上;这种情况下引用中获得的值是组件实例

  1. 如果子组件使用的是选项式 API ,默认情况下父组件可以随意访问该子组件的数据和函数,除非在子组件使用expose选项来暴露特定的数据或函数,expose值为字符串数组
  2. 如果子组件使用的是组合式 API

App.vue【选项式】

<script>
import LoginVue from './components/Login.vue';
export default {components: { LoginVue },data: ()=> ({login_vue: null}),methods: {showSonData() {console.log(this.login_vue.account) // 访问子组件中的账号数据console.log(this.login_vue.password) // 访问子组件中的密码数据this.login_vue.toLogin() // 访问子组件中的去登陆函数}},mounted(){this.login_vue = this.$refs.loginView}
}
</script><template><h3>登陆界面</h3><hr><!-- 组件上的 ref 的值为该组件的实例 --><LoginVue ref="loginView" /><hr><button @click="showSonData">查看子组件中的信息</button>
</template>

Login.vue【选项式】

<script>
// 选项式 API ,默认情况下父组件可以随意访问该子组件的数据和函数等
export default {data: ()=> ({account: 'Abc31510',password: '123321'}),methods: {toLogin() {console.log('登录中……');}},// 只暴露指定数据、函数等expose: ['account', 'toLogin']
}
</script><template>账号:<input type="text" v-model="account"><br>密码:<input type="text" v-model="password">
</template>

相关文章:

关于 vue3 模板引用

文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言 如果我们需要直接访问组件中的底层DOM元素&#xff0c;可使用vue提供特殊的ref属性来访问 1.访问模板引用 在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属…...

Redis | 安装Redis和启动Redis服务

目录 一、Redis简介 1.1 简介 二、Redis安装 2.1 Windows安装Redis 2.2 Linux安装Redis 三、Redis服务启动和停止 3.1 Windows启动Redis服务 3.2 Linux启动Redis服务 四、Redis设置密码远程连接 4.1 为Redis登陆设置密码 4.2 设置Redis允许远程连接 五、Redis常…...

博客要考虑的最佳WordPress主题

有太多的选择会瘫痪你做决定的能力。有太多的WordPress主题&#xff0c;但仅仅只需要一个并且它是要合适的。我们建立了数十个 WordPress 博客并安装了数百个主题。根据我们所有的经验&#xff0c;我们发现Newspaper是大多数用户的最佳WordPress博客主题。这个自适应、强大的主…...

C 学习笔记 —— 函数指针

函数指针 上面的第二个char (* f) (int);写法就是函数指针的声明&#xff1b; 首先&#xff0c;什么是函数指针&#xff1f;假设有一个指向 int类型变量的指针&#xff0c;该指针储存着这个int类型变量储存在内存位置的地址。 同样&#xff0c;函数也有地址&#xff0c;因为函…...

FastDDS-3. DDS层

3. DDS层 eProsima Fast DDS公开了两个不同的API&#xff0c;以在不同级别与通信服务交互。主要API是数据分发服务&#xff08;DDS&#xff09;数据中心发布订阅&#xff08;DCPS&#xff09;平台独立模型&#xff08;PIM&#xff09;API&#xff0c;简称DDS DCPS PIM&#xf…...

9.2 IGMPv2

实验目的 &#xff08;1&#xff09; 熟悉IGMPv2的应用场景 &#xff08;2&#xff09; 掌握IGMPv2的配置方法 实验拓扑 实验拓扑如图9-17所示&#xff1a; 图9-17&#xff1a;IGMPv2 实验步骤 配置IP地址&#xff08;请参考上一个实验&#xff09;运行IGP&#xff…...

巨头混战,抢着“兜底”自动驾驶安全

诚然&#xff0c;中国汽车行业的发展绝对不会拘泥于电动化&#xff0c;必定会在电动化的基础上&#xff0c;迎接下半场的快速智能化。 2021年6月&#xff0c;长城汽车线控底盘全球首次发布。 彼时&#xff0c;长城汽车技术副总裁宋东先宣布&#xff0c;整合了线控转向、线控制…...

RightCapital 第一轮面试题

现在我们就马上开始吧&#xff01; 答案在文末 JavaScript 是一门单线程的静态类型语言&#xff08;单选题&#xff09; 正确 错误 在 JavaScript 中下面哪种类型的值是不可变的&#xff08;immutable&#xff09;&#xff08;单选题&#xff09; Object Symbol Array Date …...

Python曲线肘部点检测-膝部点自动检测

文章目录一. 术语解释二. 拐点检测肘部法则是经常使用的法则。很多时候&#xff0c;可以凭人工经验去找最优拐点&#xff0c;但有时需要自动寻找拐点。最近解决了一下这个问题&#xff0c;希望对各位有用。一. 术语解释 **肘形曲线(elbow curve)**类似人胳膊状的曲线&#xff…...

【算法题】最大矩形面积,单调栈解法

力扣&#xff1a;84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 题意很简单&#xff0c;翻译一下就是&#xff1a;求该图中…...

活动策划|深度分析年货节活动该如何策划!

四月初&#xff0c;不平凡的初春开始恢复往日的平静。对于新零售行业&#xff0c;疫情的缓解也逐渐平稳生态链的运转。2020年新零售的格局在洗礼后&#xff0c;业务的聚焦点也从前端促销转移到后端履约的体验闭环&#xff0c;同时很大程度的推进企业在危机公关下的应对。618大促…...

Idea启动遇到 Web server failed to start. Port 8080 was already in use. 报错

Idea启动遇到问题-记录 报错英文提示&#xff1a; APPLICATION FAILED TO START Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to liste…...

Python3中zip()函数知识点总结

1.引言 在本文中&#xff0c;我将带领大家深入了解Python中的zip()函数&#xff0c;使用它可以提升大家的工作效率。 闲话少说&#xff0c;我们直接开始吧&#xff01; 2. 基础知识 首先&#xff0c;我们来介绍一些基础知识点&#xff1a; Python中的某些数据类型是不可变的…...

过滤器,监听器,拦截器的原理与在Servlet和Spring的应用

在Java Web的开发中&#xff0c;最原始和初期的学习都是从Servlet开始的&#xff0c;Servlet是Java最为耀眼的技术&#xff0c;也是Java EE的技术变革。目前大火主流的框架spring boot也的spring mvc部分也是基于拓展servlet完成的。回到之前的文章spring 实现了对servlet的封装…...

minio spring boot 秒传、分片上传、断点续传文件实现

此处后端使用的是前期封装的自定义starter&#xff0c;具体链接可参考&#xff1a;minio对象存储spring boot starter封装组件 这里主要针对前期封装的组件&#xff0c;做一个简单的应用&#xff0c;前端直传可查看之前的文章 秒传 秒传的逻辑比较简单&#xff0c;在前传上传…...

MTK平台使用Omnipeek分析空口协议讲解

讲解这个之前,我们先来了解下beacon/robe Request/Probe Response 三种帧 beacon帧 信标帧,由AP以一定的时间间隔周期性发出,以此来告诉外界自己无线网络的存在。 Beacon帧作为802.11中一个周期性的帧,Beacon周期调高,对应睡眠周期拉长,故节能(即越来休息100ms再起来…...

string和自动推断类型

欢迎来观看温柔了岁月.c的博客目前设有C学习专栏C语言项目专栏数据结构与算法专栏目前主要更新C学习专栏&#xff0c;C语言项目专栏不定时更新待C专栏完毕&#xff0c;会陆续更新C项目专栏和数据结构与算法专栏一周主要三更&#xff0c;星期三&#xff0c;星期五&#xff0c;星…...

【软件测试】从功能到自动化测试,测试人的进阶之路细节,这些必不可少......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 测试流程&#xff0…...

C语言青蛙跳台阶【图文详解】

青蛙跳台阶前言1. 题目介绍2. 解题思路3. 利用图片来演示青蛙跳台阶的原理4. 如何用C语言实现青蛙跳台阶前言 在本文&#xff0c;我们要与一只活泼可爱的小青蛙合作&#xff0c;带领着它跳上台阶&#xff0c;这个小家伙精力充沛&#xff0c;特别擅长于跳跃。我们要让它做我们的…...

笔记(五)——list容器的基础理论知识

list容器是一个双向链表容器&#xff0c;可以高效地进行插入删除元素&#xff0c;但是不能随机存取元素&#xff08;不支持at()和[]操作符&#xff09;。一、list容器的对象构造方法list对象采用模板类的默认构造形式例如list<T> lst&#xff1b;#include<iostream>…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...