04-Vue:ref获取页面节点--很简单

目录

    • 前言
    • 在Vue中,通过 ref 属性获取DOM元素
      • 使用 ref 属性获取整个子组件(父组件调用子组件的方法)

前言

我们接着上一篇文章 03-02-Vue组件之间的传值 来讲。


下一篇文章 05-Vue路由

在Vue中,通过 ref 属性获取DOM元素

我们当然可以使用JS原生的做法(document.getElementById)或者 jQuery 来获取DOM,但是这种做法却在无形中操作了DOM,在Vue框架中并不推荐这种做法。

我们可以通过ref属性获取DOM元素。

ref的英文单词是reference,表示引用。我们平时可以经常看到控制台会报错referenceError的错误,就和引用类型的数据有关。

在Vue中,通过 ref 属性获取DOM元素的步骤:

(1)第一步:在标签中给 DOM 元素设置 ref 属性。

    <h3 id="myH3" ref="myTitle"> 今天天气太好了</h3>

(2)第二步:通过 this.$refs.xxx 获取 DOM 元素

console.log(this.$refs.myTitle.innerText)

举例如下

<template><div id="app"><!-- 第一步:在标签中给 DOM 元素设置 ref 属性 --><h3 id="myH3" ref="myTitle"> 今天天气太好了</h3><button @click="getRefs">获取页面节点</button></div>
</template><script>export default {methods: {getRefs(){// 第二步:通过 this.this.$refs.xxx 获取 DOM 元素console.log(this.$refs.myTitle.innerText);}},
};
</script>

运行上方代码,然后我们在控制台输入vm,就可以看到:

7

使用 ref 属性获取整个子组件(父组件调用子组件的方法)

根据上面的例子,我们可以得出规律:只要ref属性加在了DOM元素身上,我们就可以获取这个DOM元素。

那我们可以通过ref属性获取整个Vue子组件吗?当然可以。这样做的意义是:在父组件中通过ref属性拿到了子组件之后,就可以进一步拿到子组件中的data和method

父组件代码:

<template><div id="app"><!-- 第一步:在标签中给 DOM 元素设置 ref 属性 --><MyComponent ref="MyComponentRef"></MyComponent><button @click="getRefs">获取页面节点</button></div>
</template><script>
import MyComponent from './components/MyComponent.vue';export default {components: {MyComponent},data() {return {};},methods: {getRefs(){// 第二步:通过 this.this.$refs.xxx 获取 DOM 元素this.$refs.MyComponentRef.handleClick()}},
};
</script>

子组件代码

<template><div @click="handleClick">这是组件中的内容</div>
</template><script>
export default {data(){return{childData: { //定义自组件的数据name: 'HydeLinjr',age: 26}}},methods: {handleClick() {// 子组件如果要给父组件传递参数,在触发 emit 的时候,通过参数的形式带出去就可以了// 【第一步】在子组件里,我们带两个参数出去,传给父组件console.log(this.childData);},},
};
</script><style>
</style>

运行代码,点击按钮后,效果如下:

8

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

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

相关文章

装机必备——Bandizip7.33安装教程

装机必备——Bandizip7.33安装教程 软件下载 软件名称&#xff1a;Bandizip7.33 软件语言&#xff1a;简体中文 软件大小&#xff1a;8.42M 系统要求&#xff1a;Windows7或更高&#xff0c; 64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM4G或更高 下载通道①迅…

#学习方法#笔记

飞鸟写作是一个非常便捷的论文写作工具&#xff0c;不仅可以帮助用户高效地完成论文写作&#xff0c;还可以提供查重降重的功能&#xff0c;帮助用户确保论文的原创性。那么&#xff0c;飞鸟写作到底可靠吗&#xff1f;答案是肯定的。 首先&#xff0c;飞鸟写作提供的查重降重…

JS逆向之企名科技

文章目录 初步分析定位js编写完整代码参考文献初步分析 目标网址:企名科技 抓包分析,发现是post请求 请求代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- import requestsheaders = {Connection:

【LeetCode面试经典150题】226. 翻转二叉树

一、题目 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09;给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 二、思路 其实就是个二叉树遍历问题&#xff0c;只不过不是单纯的遍历&#xff0c;而是在遍历的同时进行元素的交换&a…

利用ChatGPT辅助数学建模竞赛:理清思路、解题技巧与实战经验

导言 数学建模竞赛是许多学生在学术领域追求卓越的重要途径之一。然而,竞赛题目的复杂性常常让人望而生畏。在这样的情况下,利用人工智能工具,如ChatGPT,可以极大地辅助我们快速理清思路、解题技巧与实战经验。本文将探讨如何利用ChatGPT在数学建模竞赛中取得更好的成绩,…

Android应用开发之AndroidManifest.xml

一.AndroidManifest.xml介绍 1.定义 AndroidManifest官方解释是应用清单&#xff08;manifest意思是货单&#xff09;&#xff0c;每个应用的根目录中都必须包含一个&#xff0c;并且文件名必须一模一样。 它是Android程序的全局配置文件&#xff0c;是每个 android程序中必须…

韭菜收割项目

最近在玩股票&#xff0c;被人当成韭菜收割了一顿。高点追涨&#xff0c;第二天直接跌停。以为是低点&#xff0c;想抄底&#xff0c;结果别人直接抄家&#xff0c;血亏!!! 作为一个程序员&#xff0c;还是好好敲代码赚钱好了&#xff0c;一步一步。想不劳而获是不可能的。 我写…

[智能AI摄像头]使用docker搭建RV1126开发环境

创建ubuntu docker 创建dockerfile # 设置基础镜像为Ubuntu 18.04FROM ubuntu:20.04# 设置作者信息MAINTAINER warren "2016426377qq.com"# 设置环境变量&#xff0c;用于非交互式安装ENV DEBIAN_FRONTENDnoninteractive# 备份源列表文件RUN cp -a /etc/apt/source…

视频号小店脱颖而出,一跃成为电商黑马!马化腾要实现电商梦了?

大家好&#xff0c;我是喷火龙。 视频号这个名字在电商的圈子里是经常被提起的&#xff0c;特别是从今年开始&#xff0c;很多之前的电商项目不行&#xff0c;加上传统电商平台开始走下坡路&#xff0c;于是很多电商人都把视频号小店作为一个新的突破口。 因为视频号小店足够…

.NET技术成长路线架构图

.NET技术成长路线架构图 1. 入门基础 编程语言&#xff1a;C# 基础知识&#xff08;变量、数据类型、控制结构、面向对象编程&#xff09;开发环境&#xff1a;Visual Studio 安装与配置基础框架&#xff1a;.NET Framework 或 .NET Core/.NET 5 的基本概念 2. 进阶技能 We…

MySQL 数据备份实战

文章目录 前言简介一、数据备份导出SQL文件第一步&#xff1a;登录MySQL第二步&#xff1a;选中数据库第三步&#xff1a;数据导出SQL文件 二、还原SQL文件第一步&#xff1a;登录MySQL第二步&#xff1a;创建数据库第三步&#xff1a;选中数据库第三步&#xff1a;终端命令行语…

担心安全性?银行卡四要素检测API帮你搞定

聚合小课堂&#xff0c;每天一个API 不知道家里是不是还有坚持不用电子支付的显眼包长辈 一问就是怕支付平台“漏财”。 但是&#xff0c;你还别说&#xff0c; 你怕商家坑你 商家也怕被你逗着玩 要是不幸遇上一个牛鬼蛇神 盗刷、欺诈&#xff0c;财货两空 那才是&#xff0c;叫…

代码随想录算法训练营第四十二天 | 62.不同路径、63. 不同路径 II

62.不同路径 代码随想录 视频讲解&#xff1a;动态规划中如何初始化很重要&#xff01;| LeetCode&#xff1a;62.不同路径_哔哩哔哩_bilibili 解题思路 1.dp[i][j]表示从00走到ij有多少种方式 2. ij可以由i-1&#xff0c;j往右走一步&#xff0c;或者i&#xff0c;j-1往想下走…

精通Java:高级面试问题精粹与解答(一)

Java 高级面试问题及答案 1. 如何在Java中实现多线程&#xff1f; 答案&#xff1a; 在Java中实现多线程有几种方式&#xff1a; 继承Thread类&#xff1a;创建一个类继承自Thread类&#xff0c;并重写其run()方法。实现Runnable接口&#xff1a;创建一个类实现Runnable接口…

修改ui 组件 表格划过效果

问题描述 Ant Design Vue 中table 表格 取消划过效果&#xff0c;正常使用类找到效果并修改后 会出现闪白的情况。 .ant-table-cell-row-hover:hover:not(.ant-table-expanded-row) > td{background-color: green !important; }原因分析&#xff1a; 代码运行自上而下并因…

1791.找出星形图的中心节点

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

电脑中msvcp100.dll丢失了怎么办?总结7种靠谱的解决方法

msvcp100.dll 文件是 Microsoft Visual C 2010 Redistributable 的一部分&#xff0c;这是一个重要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;用于存储许多程序共同使用的代码和资源。它是执行 C 编写的应用程序所必需的&#xff0c;尤其是那些使用 Visual C 20…

全局配置Maven

如果开着项目&#xff0c;就file->close project 如果创建有问题可以转到这篇rIDEA2024创建maven项目-CSDN博客https://blog.csdn.net/weixin_45588505/article/details/139271562?spm1001.2014.3001.5502

Layui 项目打开左侧菜单空白解决方案

home/index.html 页面中 替换 navigation 为 menu

海外仓ERP系统:赋能海外仓,实现标准化管理

随着业务规模的不断发展和业务类型的复杂度逐渐提升&#xff0c;传统的海外仓管理模式已经很难适应现在的情况了。对海外仓企业来说&#xff0c;一套合适的海外仓管理erp系统可以起到很大的辅助作用。 不过很多小型海外仓企业会纠结于是同时选择企业erp系统和海外仓管理系统&a…