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

第十二节——ref

一、概念

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

注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册

二、在dom上使用ref

ref 加在普通的元素上,用this.ref.divRef 获取到的是dom元素

<template><div><div ref="divRef">第一个一个普通的div</div><div ref="divRef2">第二个个普通的div</div><button @click="getRef">按钮</button></div>
</template>
<script>
export default {methods: {getRef () {/*** 使用this.$refs* 拿到当前组件里所有的ref对象*/console.log(this.$refs)}}}</script>

三、在组件上使用ref

ref 加在子组件上,用this.ref.xxx 获取到的是组件实例,可以使用组件的所有方法

<template><div><QfNum ref="numRef"></QfNum><button @click="add">子组件+1</button></div>
</template>
<script>
import QfNum from './qf-num.vue'
export default {components: {QfNum,},methods: {add () {// 可以直接获取到对应的组件状态和方法this.$refs.numRef.add()console.log(this.$refs.numRef.num)}},
};
</script>

相关文章:

第十二节——ref

一、概念 ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用&#xff0c;引用信息就是元素; 如果用在子组件上&#xff0c;引用信息就是组件实例。 注意&#xff1a;只要想要在Vue中直接操作DOM元素&#xff…...

少儿编程 2023年9月中国电子学会图形化编程等级考试Scratch编程四级真题解析(判断题)

2023年9月scratch编程等级考试四级真题 判断题(共10题,每题2分,共20分) 11、运行程序后,变量"result"的值是6 答案:对 考点分析:考查积木综合使用,重点考查自定义积木的使用 图中自定义积木实现的功能是获取两个数中最大的那个数并存放在result变量中,左…...

【设计模式三原则】

设计模式三原则 单一职责原则开放封闭原则依赖倒转原则里氏代换原则 我们在进行程序设计的时候&#xff0c;要尽可能地保证程序的可扩展性、可维护性和可读性&#xff0c;所以需要使用一些设计模式&#xff0c;这些设计模式都遵循了以下三个原则&#xff0c;下面来依次为大家介…...

600MW发电机组继电保护自动装置的整定计算及仿真

摘要 随着科技的发展&#xff0c;电力已成为最重要的资源之一&#xff0c;如何保证电力的供应对于国民经济发展和人民生活水平的提高都有非常重要的意义。在电能输送过程中&#xff0c;发电机组是整个过程中最重要的一个基本元素&#xff0c;在电力系统中的输送和分配中被广泛应…...

【蓝桥每日一题]-字符串(保姆级教程 篇1)#atcoder324C~E题

今天来讲字符串题型 目录 题目&#xff1a;atcoder324C题 思路&#xff1a; 题目&#xff1a;atcoder324D题 思路&#xff1a; 题目&#xff1a;atcoder324E题 思路&#xff1a; 题目&#xff1a;atcoder324C题 给一个T字符串&#xff0c;然后给出n个S串&#xff0c;对…...

4.2.1 SQL语句、索引、视图、存储过程

怎么执行一条select语句 1.连接器 接收连接-》管理连接-》校验用户信息 2.查询缓存 kv存储&#xff0c;命中直接返回&#xff0c;否则继续执行 8.0已经删除 3.分析器 词法句法分析生成语法树 4.优化器 指定执行计划&#xff0c;选择查询成本最小的计划 5.执行器 根据执行计划&a…...

1992-2021年全国各地级市经过矫正的夜间灯光数据(GNLD、VIIRS)

1992-2021年全国各地级市经过矫正的夜间灯光数据&#xff08;GNLD、VIIRS&#xff09; 1、时间&#xff1a;1992-2021年3月&#xff0c;其中1992-2013年为年度数据&#xff0c;2013-2021年3月为月度数据 2、来源&#xff1a;DMSP、VIIRS 3、范围&#xff1a;分区域汇总&…...

机器人的触发条件有什么区别,如何巧妙的使用

简介​ 维格机器人触发条件,分为3个,分别是: 有新表单提交时、有记录满足条件时、有新的记录创建时 。 看似3个,其实是能够满足我们非常多的使用场景。 本篇将先介绍3个条件的触发条件,然后再列举一些复杂的触发条件如何用现有的触发条件来满足 注意: 维格机器人所有的…...

【Qt6】QStringList

2023年10月31日&#xff0c;周二上午 QStringList 是 Qt 中的一个类&#xff0c;用于存储一组字符串。它提供了一些方便的方法来操作和管理字符串列表。 QStringList 可以用于存储任意数量的字符串&#xff0c;并提供了一些常用的操作&#xff0c;例如添加、删除、查找、排序等…...

代码随想录算法训练营第五十三天|309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

309. 买卖股票的最佳时机含冷冻期 int maxProfit(int* prices, int pricesSize){int len pricesSize;int dp[len][4];dp[0][0] -prices[0];dp[0][1] 0;dp[0][2] 0;dp[0][3] 0;for (int i 1; i < pricesSize; i){dp[i][0] fmax(dp[i-1][0], fmax(dp[i-1][1] - prices…...

厚黑学笔记

厚黑学 我现在的情况就是在听书听到一半&#xff0c;但在软件上看书已经看完了&#xff0c;厚黑学要讲的东西大概已经摸清楚了。 总体来说&#xff0c;厚黑学里面的章节内容有一点沾边的嫌疑&#xff08;看完后的想法)&#xff0c;但这本书还是有值得阅读的&#xff0c;但主讲…...

IDEA MyBatisX插件介绍

一、前言 前几年写代码的时候&#xff0c;要一键生成DAO、XML、Entity基础代码会采用第三方工具&#xff0c;比如mybatis-generator-gui等&#xff0c;现在IDEA或Eclipse都有对应的插件&#xff0c;像IDEA中MyBatisX就是一个比较好用的插件。 二、MyBatisX安装配置使用 MyBa…...

【PyQt学习篇 · ②】:QObject - 神奇的对象管理工具

文章目录 QObject介绍Object的继承结构测试QObject对象名称和属性QObject对象名称和属性的操作应用场景 QObject父子对象QObject父子对象的操作 QObject的信号与槽QObject的信号与槽的操作 QObject介绍 在PyQt中&#xff0c;QObject是Qt框架的核心对象之一。QObject是一个基类…...

【AcWing】1.1.3二分搜索

一、二分搜索 1、查找数的范围 原题链接  这道题看似是二分搜索的题目&#xff0c;实则就是二分搜索。与一般的搜索不同的是&#xff0c;若查找元素重复&#xff0c;则分别返回重复元素的左端下标和右端下标&#xff0c;若不存在则返回“-1 -1。我们常用的二分搜索是返回的…...

【Python第三方包】串口通信(pySerial包)

文章目录 前言一、串口的基本使用1.1 配置串口基本信息1.2 读取串口数据1.3 写串口1.4 关闭串口二、示例代码2.1 示例1: 从串口读取数据2.2 示例2: 向串口写入数据总结前言 串口通信是许多嵌入式和物联网应用中的关键组成部分。Python 提供了许多第三方库来简化串口通信的实现…...

VS Code2023安装教程(最新最详细教程)附网盘资源

目录 一.简介 二.安装步骤 三.VS Code 使用技巧 网盘资源见文末 一.简介 VS Code是一个由微软开发的跨平台的轻量级集成开发环境&#xff08;IDE&#xff09;&#xff0c;被广泛用于编写各种编程语言的代码。它支持多种编程语言&#xff0c;并且可以通过插件扩展功能。 以…...

最优值函数

一、最优状态值函数 解决强化学习任务大致上意味着找到一种政策&#xff0c;能够在长期内实现很多奖励。对于有限MDPs&#xff0c;我们可以精确地定义一种最优政策&#xff0c;其定义如下。值函数定义了政策的一种部分排序。如果一个政策的预期回报大于或等于另一个政策π0在所…...

软考系统架构师知识点集锦十:计算机网络、数学与经济管理、知识产权与标准化

一、计算机网络 1.1、考情分析 2.1 TCP/IP协议簇 2.1.1常见协议及功能 网际层是整个TCP/IP体系结构的关键部分,其功能是使主机可以把分组发往任何网络并使分组独立地传向目标。 POP3: 110 端口&#xff0c;邮件收取SMTP: 25 端口&#xff0c;邮件发送FTP: 20数据端口/21控制…...

风云七剑攻略,最强阵容搭配

今天的风云七剑攻略最强阵容搭配给大家推荐以神仙斋减怒回血为主的阵容。 关注【娱乐天梯】&#xff0c;获取内部福利号 首先&#xff0c;这个角色在这个阵容当中&#xff0c;所有的角色当中&#xff0c;他的输出系数是最高的&#xff0c;已经达到了200%的层次&#xff0c;而且…...

关于ABB 机器人多任务的建立

关于ABB 机器人多任务的建立.需要实时监控某一区域&#xff0c;或者某一信号&#xff0c;或者计件到达某一数量机器人自动停止报警&#xff0c;显示到示教器上&#xff0c;多任务可以实现&#xff0c;类似发那科机器人后台逻辑指令 当软件选项漏选或者少选可以选择修改选项&…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...