vue:ref的作用和实例

定义:用来获取元素或子组件注册或者引用信息,父组件通过$ref获取到相应的DOM对象和子组件

1、vue中ref的作用

  • 获取页面的DOM元素
  • 获取子组件的对象(也是一种通信方式)

2、实例

   1、获取DOM,首先创建一个父页面index然后写一个标签h1获取这个标签的DOM元素

h1的样式:

 运行:控制台打印出H1标签的dom元素,

例如:dom元素中的文本、网页中的位置和样式等

我们获取它的样式给view标签使用,那么$refs.路径,这里样式的路径是p.id所以引入的模版就是这样

运行效果:

刚刚黑色的文字也变成了紫色

3、获取子组件对象

  首先我们需要引入子组件samsung并在子组件中写一些数据和方法以便后面父元素好调用

  1、引入子组件samsung并获取samsung组件的对象

samsung页面:

运行:

打开控制台我们就能获取到samsung组件中的数据和方法和很多数据

然后我们获取并使用子页面的数据和方法:

运行并打印结果:

点击使用方法:

从而完成父子之间的组件通信。

总结:

ref的作用主要是:获取页面的DOM元素(样式、位置、文本等)、获取子组件的对象(也是一种通信方式)

源码:

(使用uniapp运行):父页面

<template><div class="father"><h1 ref="p" id="oss">我是父页面</h1><!--获取Dom--><!-- 	<view :id="$refs.p.id">我想使用父页面h1的样式</view> --><samsung ref="samsung"></samsung><view>获取子组件中的数据:{{$refs.samsung.data}}</view><view><button @click="next">nexttick</button></view></div>
</template><script>import SamsungComponent from '@/components/samsung.vue'; // 根据实际路径进行修改export default {components: {'samsung': SamsungComponent,},data() {return {box: ['项目1', '项目2', '项目3']}},mounted() {console.log(this.$refs) //获取dom// console.log(this.$refs.p.innerHTML)console.log(this.$refs.p.id)console.log(this.$refs.samsung) //子组件// console.log(this.$refs.samsung.data) //获取自组件的数据// console.log(this.$refs.samsung.add(1, 2)) //获取子组件的方法},methods: {next() {console.log('数据',this.$refs.samsung.add(1,2))},// add(num, num1) {// 	return num + num1// }}};
</script><style>.father{width: 500px;height: 500px;background-color: antiquewhite;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #942894;}#oss {color: #942894;}
</style>

子页面:

<template><view class="son"><!--定义ref属性,用来--><h3>我是子页面</h3><!--获取DOM--></view>
</template><script>export default {data() {return {data: '我是数据'}},methods: {add(num, num1) {return num + num1}}}
</script><style>.son{width: 200px;height: 200px;background-color: blue;}
</style>

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

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

相关文章

如何自定义右键弹框并实现位置自适应?

一、问题 右键显示弹框&#xff0c;但是靠近浏览器边缘的部分会被隐藏&#xff0c;需要实现弹框位置自适应 二、 问题分析 如果想要最终弹框的宽高不超过屏幕视口&#xff0c;就等于屏幕视口的总宽/高减去弹框打开时的起点坐标&#xff0c;剩下的部分大于等于弹框的宽/高&…

商家如何进行商业模式开发,助力产品更好的销售模式?

商家如何进行商业模式开发&#xff0c;助力产品更好的销售模式&#xff1f; 随着各类电商平台的疯狂崛起&#xff0c;越来越多的商家对其中带来的高额回报率产生心动&#xff0c;毕竟对于线上的场景来说&#xff0c;即省去了房租、水电、仓储以及其他各种费用&#xff0c;用电商…

vue3 + TypeScript使用国际化

vue3 TypeScript使用国际化 本文使用了 Vite 构建工具创建的vue3项目Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块Vite 官方中文文档当然如果你的vue3项目未使用vite,你也可以为你的旧项目提提速&#xff0c;安装vite &#xff0c;安装方法在上一个博客…

【华为数据之道学习笔记】6-5数据地图的核心价值

数据供应者与消费者之间往往存在一种矛盾&#xff1a;供应者做了大量的数据治理工作、提供了大量的数据&#xff0c;但数据消费者却仍然不满意&#xff0c;他们始终认为在使用数据之前存在两个重大困难。 1&#xff09;找数难 企业的数据分散存储在上千个数据库、上百万张物理表…

汽车行业一些知识

一、汽车术语集合 1、 轴距(mm)&#xff1a;汽车前轴中心至后轴中心的距离。 2、转弯半径(mm)&#xff1a;汽车转向时&#xff0c;汽车外侧转向轮的中心平面在车辆支撑平面上的轨迹圆半径。转向盘转到极限位置时的转弯半径为最小转弯半径。 3、最大总质量(kg)&#xff1a;汽…

动态数组的实现

定义 1. 在计算机科学中&#xff0c;数组是由一组元素&#xff08;值或变量&#xff09;组成的数据结构&#xff0c;每个元素有至少一个索引或键来标识。 2. 因为数组内的元素是连续存储的&#xff0c;所以数组中元素的地址&#xff0c;可以通过其索引计算出来。 3. 知道了数…

计算机网络-网络层

计算机网络-网络层 以下笔记整理为哔哩哔哩湖科大教书匠的《计算机网络微课堂》的教学视频。 链接&#xff1a;计算机网络微课堂 1. 网络层概述 1.1 网络层的主要任务是实现网络互联&#xff0c;进而实现数据包在各网络之间的传输。 1.2 要实现网络层任务&#xff0c;需要解决…

【飞凌 OK113i-C 全志T113-i开发板】一些有用的常用的命令测试

一些有用的常用的命令测试 一、系统信息查询 可以查询板子的内核信息、CPU处理器信息、环境变量等 二、CPU频率 从上面的系统信息查询到&#xff0c;这是一颗具有两个ARMv7结构A7内核的处理器&#xff0c;主频最高1.2GHz 可以通过命令查看当前支持的频率以及目前所使用主频 …

Spring IoCDI

文章目录 前言什么是Spring1. 什么是 IoC 容器1.1 什么是容器1.2 什么是 IoC 2. 什么是DI IoC & DI 的使用IoC详解Bean的存储Controller注解如何获取Bean1. 根据Bean的名称获取Bean2. 根据Bean类型获取Bean3. 根据Bean名和Bean类型获取Bean Service注解Repository注解Compo…

使用Docker一键部署Uptime Kuma,并将监控服务映射至公网访问

文章目录 **主要功能**一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用本教程安装。本教程使用Docker部署服务&#xff0c;如何安装Docker详见&#xff1a; 二、Docker部署Uptime Kuma三、实现公网查看网站监控四、使用固定公网地址访问…

go语言初体验1--使用go install

当安装后go语言后。 尝试编写go程序。 当使用 go install 命令&#xff0c;报错。 go: go install requires a version when current directory is not in a moduleTry go install jvmgo\ch01latest to install the latest version通过查找资料。 用命令&#xff1a; go env …

混合精度训练(MAP)

一、介绍 使用精度低于32位浮点数的数字格式有很多好处。首先&#xff0c;它们需要更少的内存&#xff0c;可以训练和部署更大的神经网络。其次&#xff0c;它们需要更少的内存带宽&#xff0c;这加快了数据传输操作。第三&#xff0c;数学运算在降低精度的情况下运行得更快&a…

YOLOv5算法改进(23)— 更换主干网络GhostNet + 添加CA注意力机制 + 引入GhostConv

前言:Hello大家好,我是小哥谈。本节课就让我们结合论文来对YOLOv5进行组合改进(更换主干网络GhostNet + 添加CA注意力机制 + 引入GhostConv),希望同学们学完本节课可以有所启迪,并且后期可以自行进行YOLOv5算法的改进!🌈 前期回顾: YOLOv5算法改进(1)— 如何去…

C++类与对象(中)第一篇

目录 前言&#xff1a; 类的六个默认成员函数 构造函数 析构函数 拷贝构造函数 拷贝场景一&#xff1a;函数参数类型为类类型对象 拷贝场景二&#xff1a;利用已存在的对象创建新对象 拷贝场景三&#xff1a;函数返回值类型为类类型对象 前言&#xff1a; 编译器编译类…

推箱子地图库1-49关

推箱子地图库1-49关 49关 local WALL1--{"墙","墙 "}4 10287 local DEST2--{"目的地",""}1 4001100 10157 local BOX3--{"箱子","&#xffe5;"} 2 2000801 local PLAYER4--{"玩家","&&a…

influxdb-cluster集群部署

一.部署环境 * InfluxDB集群节点数&#xff1a;mate服务至少3个节点&#xff0c;节点数越多&#xff0c;集群性能越高。 * 操作系统&#xff1a;支持的操作系统包括Linux、Windows和MacOS。 * CPU&#xff1a;至少2核4线程&#xff0c;主频越高越好。 * 内存&#xff1a;至少8…

【已解决】Redis序列化反序列化不一致 - String类型值多了双引号问题

在项目中使用spring 的RedisTemplate从redis中获取数据的时候&#xff0c;发现字符串的value多了双引号。如下图所示&#xff1a; 产生的原因可以分一下几个方面&#xff1a; 一、采用的序列化对象不同 多服务之间调用时候&#xff0c;序列化服务A(向redis中写数据的)和反序…

【翼韵】数据上传沟通、决策、试错

韵达德邦来说说&#xff0c;翼达、翼韵、翼德、翼邦的小记录 翼达同学&#xff1a;沟通成本好大&#xff01; 翼韵同学&#xff1a;决策成本很大&#xff01; 翼德同学&#xff1a;试错成本更大&#xff01; 翼邦同学&#xff1a;你们加起最大&#xff01; QY成本沟通成本33%决…

Win7如何修改MAC地址

MAC地址&#xff0c;又叫做物理地址、硬件地址&#xff0c;是用来定义网络设备的位置&#xff0c;一般情况下&#xff0c;MAC地址在网卡中是固定的&#xff0c;但不排除有人手动去修改自己的MAC地址。win7如何修改MAC地址?其实修改MAC地址的方法很简单&#xff0c;可以通过硬件…

K8s出现问题时,如何排查解决!

K8s问题的排查 1. POD启动异常、部分节点无法启动pod2. 审视集群状态3. 追踪事件日志4. 聚焦Pod状态5. 检查网络连通性6. 审视存储配置7. 研究容器日志8. K8S集群网络通信9. 问题&#xff1a;Service 是否通过 DNS 工作&#xff1f;10. 总结1、POD启动异常、部分节点无法启动p…