Vue41 ref属性

news2024/10/6 9:25:09

ref属性

ref是Vue提供的获取组件的属性
在这里插入图片描述

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<MySchool ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import MySchool from './components/MySchool'

	export default {
		name:'App',
		components:{MySchool},
		data() {
			return {
				msg:'欢迎学习Vue!'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			}
		},
	}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1854898.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android开发神器:OkHttp框架源码解析

NetworkInterceptors CallServiceInterceptor 1.RealInterceptorChain.proceed() 2.EventListener.callStart()也是在RealCall.execute()嵌入到Request调用过程, EventListener.callEnd()位于StreamAllocation中调用 3.Request.Builder url (String/URL/HttpUrl) header …

WordPress插件:子比zibll主题插件 炙焰美化全开源插件V3.2

在数字时代&#xff0c;拥有一个美观且功能丰富的网站是吸引和保持用户的关键。WordPress作为全球最受欢迎的内容管理系统之一&#xff0c;提供了一个灵活的平台&#xff0c;让网站所有者能够通过插件来增强其网站的功能和外观。"炙焰美化全开源插件V3.2"正是这样一款…

SD卡无法读取?数据恢复全攻略!

SD卡无法读取问题描述 在日常使用电子设备时&#xff0c;我们有时会遇到SD卡无法读取的情况。当插入SD卡后&#xff0c;设备可能无法识别或访问其中的数据&#xff0c;这给我们带来了诸多不便。SD卡无法读取&#xff0c;意味着存储在卡中的重要文件、照片和视频等资料可能面临…

QListView、QTableView或QTreeView截取滚动区域(截长图)

本文以QTreeView为例,理论上继承自QAbstractScrollArea的类都支持本文所述的方法。 一.效果 一共5个文件夹,每个文件文件夹下有5个文件,先把文件夹展开,然后截图。将滚动条拖到居中位置,是为了证明截图对滚动条无影响 下面是截的图 二.原理 将滚动区域的viewport设置为…

Typora最新安装教程2024

Typora是一款广受好评的跨平台Markdown编辑软件&#xff0c;支持Windows、MacOS和Linux操作系统。它的设计旨在提供一个无干扰、高效且直观的写作环境。户快速管理和查找文档&#xff0c;支持直接在软件内浏览和操作文件结构。 Typora以其简洁而强大的功能集合&#xff0c;成为…

SQL Server中CROSS APPLY连接操作

在 SQL Server 中&#xff0c;CROSS APPLY 是一个连接操作&#xff0c;它类似于 INNER JOIN&#xff0c;但有一些关键差异&#xff0c;特别是在处理表值函数&#xff08;TVF&#xff09;、行集函数或子查询时。CROSS APPLY 返回对于外部查询中的每一行&#xff0c;在内部查询或…

【栈和队列】

目录 1&#xff0c;栈&#xff08;Stack&#xff09; 1.1 概念 1.2 栈的使用 1.3 栈的模拟实现 1.4 栈的应用场景 1.5 概念区分 1.6 使用链表来实现栈 2&#xff0c; 队列(Queue) 2.1 概念 2.2 队列的使用 2.3 队列模拟实现 3&#xff0c;双端队列 (Deque) 4&…

r2frida:基于Frida的远程进程安全检测和通信工具

关于r2frida r2frida是一款能够将Radare2和Frida的功能合二为一的强大工具&#xff0c;该工具本质上是一个Radare2的自包含插件&#xff0c;可以帮助广大研究人员利用Frida的功能实现对目标进程的远程安全检测和通信管理。 Radare2项目提供了针对逆向工程分析的完整工具链&…

利用golang_Consul代码实现Prometheus监控目标的注册以及动态发现与配置

文章目录 前言一、prometheus发现方式二、监控指标注册架构图三、部分代码展示1.核心思想2.代码目录3、程序入口函数剖析4、settings配置文件5、初始化配置文件及consul6、全局变量7、配置config8、公共方法目录common9、工具目录tools10、service层展示11、命令行参数12、Make…

使用 axios 进行 HTTP 请求

使用 axios 进行 HTTP 请求 文章目录 使用 axios 进行 HTTP 请求1、介绍2、安装和引入3、axios 基本使用4、axios 发送 GET 请求5、axios 发送 POST 请求6、高级使用7、总结 1、介绍 什么是 axios axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用于浏览器和 Node.js 中…

十大经典排序算法——选择排序和冒泡排序

一、选择排序 1.基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据全部排完。 2.直接选择排序 (1) 在元素集合arr[i] — arr[n - 1]中选择关键妈的最大&#xff08;小…

目标检测数据集 - 手机屏幕表面表面缺陷检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;手机屏幕表面缺陷检测数据集&#xff0c;真实采集高质量手机屏幕表面含缺陷图片数据&#xff0c;数据集含多款不同型号和品牌的手机屏幕表面图片数据&#xff0c;包括苹果手机屏、三星手机屏、华为手机屏等数据。数据标注标签包括 Bubble 气泡/水滴、Scr…

google gemini1.5 flash视频图文理解能力初探(一)

市面能够对视频直接进行分析的大模型着实不多&#xff0c;而且很多支持多模态的大模型那效果着实也不好。 从这篇公众号不只是100万上下文&#xff0c;谷歌Gemini 1.5超强功能展示得知&#xff0c;Gemini 1.5可以一次性处理1小时的视频、11小时的音频或100,000行代码&#xff0…

修改源码,打patch包,线上环境不生效

1.首先看修改的源码文件是否正确 在node_modules中&#xff0c;找对应的包&#xff0c;然后查看包中package.json 的main和module。如果用require引入&#xff0c;则修改lib下面的组件&#xff0c;如果是import引入则修改es下面的文件 main 对应commonjs引入方式的程序入口文件…

python-04

str.spilt() str.spilt(str" ", num string.count(str)); str&#xff1a;分隔符&#xff0c;默认为所有的空字符&#xff0c;包括空格、换行符"\n"、制表符"\t"等。 num&#xff1a;分隔次数 str "小时候 总有他们在耳边叮咛嘱咐 小…

Redis 高可用 sentinel

简介 Sentinel提供了一种高可用方案来抵抗节点故障&#xff0c;当故障发生时Redis集群可以自动进行主从切换&#xff0c;程序可以不用重启。 Redis Sentinel集群可以看成是一个Zookeeper集群&#xff0c;他是Redis集群高可用的心脏&#xff0c;一般由3-5个节点组成&#xff0…

195.回溯算法:分割回文串(力扣)

代码解决 class Solution { public:vector<string> res; // 当前路径&#xff0c;用于存储一个可能的回文分割结果vector<vector<string>> result; // 存储所有可能的回文分割结果// 判断子串 s[left:right] 是否是回文bool isPalindrome(const string& …

示例:WPF中如何绑定ContextMenu和Menu

一、目的&#xff1a;开发过程中&#xff0c;有些模块的右键ContextMenu菜单是需要动态显示的&#xff0c;既是根据不同条件显示不同的菜单&#xff0c;很多是通过代码去生成ContextMenu的MenuItem&#xff0c;本文介绍通过绑定的方式去加载ContextMenu&#xff0c;Menu菜单栏的…

Java面试题:数据库索引

数据库索引 索引:index 帮助mysql高效获取数据的数据结构,在数据之外,数据库系统还维护着满足特定查找算法的数据结构(B树),这些数据结构以某种方式引用(指向数据),这样就可以在数据结构上实现高级查找算法 将数据以树的方式进行存储,提高查找效率 索引的底层结构 使用B树 …

C语言中的进制转换

基础概念 进制又称数制&#xff0c;是指用一组固定的符号和统一的规则来表示数值的方法&#xff0c;在C语言中&#xff0c;可以使用不同的前缀来表示不同的进制&#xff1a; 二进制&#xff1a;以0b或0B为前缀&#xff08;部分编译器可能不支持&#xff09;八进制&#xff1a…