Vue3实战笔记(44)—vue3组件的ref属性

文章目录

  • 前言
  • 一、组件的ref用法总结
  • 总结


前言

之前学习过ref声明响应式对象,前几天读代码遇到了发懵的地方,详细学习了一下才发现,用法还有很多,遂总结一下ref的用法备忘。


一、组件的ref用法总结

Vue3 中的 ref 是一种创建响应式引用的方式,它在Vue生态系统中扮演着重要角色。以下是Vue3中ref属性及其相关API的几个关键点:

创建响应式变量:使用 ref 函数可以创建一个响应式的数据引用,返回的对象包含 .value 属性,该属性既可以读取也可以写入,并且是响应式的。例如:

Javascript
1import { ref } from 'vue';
2
3const count = ref(0); // 创建一个响应式引用,初始值为0
4console.log(count.value); // 输出0
5count.value++; // 改变值,这将触发视图更新

在模板中使用 ref:在模板中,可以使用 v-ref 或简写 ref 来给 DOM 元素或组件添加引用标识符。对于DOM元素:

<div ref="myDiv">Hello World</div>

然后在组件的 setup 函数内或者生命周期钩子如 onMounted 中通过 ref 访问到该元素:

onMounted(() => {console.log(myDiv.value); // 这将输出对应的DOM元素
});// 注意,在setup函数中使用需要解构
setup() {const myDiv = ref<HTMLElement | null>(null);// ...

对于子组件,ref 则指向子组件的实例:

<MyChildComponent ref="childRef" />

动态 refs:在动态渲染的组件或循环列表中,可以使用动态 ref 名称:

1<component v-for="(item, index) in items" :is="item.component" :key="index" :ref="`child${index}`" />
然后通过 getCurrentInstance() 获取这些动态 ref:Javascript
1setup() {
2  const instance = getCurrentInstance();
3  const childrenRefs = computed(() => {
4    return instance.refs;
5  });
6  // ...
7}

组件间通信:通过 ref 可以方便地在组件之间传递并操作状态,尤其适用于父子组件之间的通信。
(1)创建一个子组件 ChildComponent.vue:


<template><div><h2>{{ childMessage }}</h2><button @click="handleClick">点击我</button></div>
</template><script>
import { ref, defineComponent } from 'vue';export default defineComponent({setup(props, { emit }) {const childMessage = ref('Hello from Child');const handleClick = () => {emit('child-clicked', 'Child component clicked!');};return {childMessage,handleClick,};},
});
</script>

(2)创建一个父组件 ParentComponent.vue,并使用 ref 属性访问子组件实例:

<!-- ParentComponent.vue --><template><div><h1>Parent Component</h1><ChildComponent ref="childRef" /><button @click="callChildMethod">Call Child Method</button></div>
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},setup() {const childRef = ref(null);function callChildMethod() {childRef.value.showMessage();}return {childRef,callChildMethod,};},
};
</script>

在这个示例中,我们在父组件的模板中使用了 ref 属性,并将其值设置为 “childRef”。然后,在组合式 API 的 setup 函数中,我们创建了一个名为 childRef 的响应式引用,并将其初始值设置为 null。接着,我们定义了一个名为 callChildMethod 的方法,用于调用子组件的 showMessage 方法。当用户点击按钮时,callChildMethod 方法会被调用,从而触发子组件的 showMessage 方法并在控制台输出一条消息。

import { reactive, toRef } from 'vue';
2
3const state = reactive({ count: 0 });
4const countRef = toRef(state, 'count'); // 提取出count属性的响应式引用

总结

总之,Vue3 的 ref 功能增强了Vue的响应式系统,使得开发者能够更灵活地处理组件的状态及组件间交互,同时提供了对DOM元素的直接访问能力。

人总是在接近幸福时倍感幸福,在幸福进行时却患得患失。

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

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

相关文章

【Linux 网络】网络基础(三)(网络层协议:IP 协议)

在复杂的网络环境中确定一个合适的路径。 一、TCP 与 IP 的关系 IP 层的核心作用是定位主机&#xff0c;具有将数据从主机 A 发送到主机 B 的能力&#xff0c;但是能力并不能保证一定能够做到&#xff0c;所以这时就需要 TCP 起作用了&#xff0c;TCP 可以通过超时重传、拥塞控…

【必备工具】gitee上传-保姆级教程

目录 1.gitee是什么 2.gitee怎么注册 ​编辑 3.gitee怎么提交代码 4.gitee的三板斧 Clone仓库 Q&A 1. Gitee 只有三板斧吗&#xff1f; 2. Git 教了&#xff0c;Gitee 上没有绿点怎么办&#xff1f; 3. 用户名和密码输入错误怎么办&#xff1f; 4. 操作时不小心…

【c++基础】和谐分组

题目描述 s 班共有 n 名学生&#xff0c;按照学号从 1 到的顺序每名学生的身高分别为 a[1],a[2]...a[n]。由于是新学期&#xff0c;s 班需要进行分组&#xff0c;分组的要求如下&#xff1a; 进行分组的组数不能超过 k。 每组的人的学号必须相邻。 由于身高差过大的人分在同一…

wordpress主题给网站增加一个版权声明区块代码分享

在数字化时代&#xff0c;网络上的信息传播变得越来越便捷&#xff0c;给人们生活和工作带来了极大的便利。然而&#xff0c;在这个过程中也产生了很多版权问题。为了更好地保护自己的版权&#xff0c;许多网站开始在其网页上添加版权声明。本文将探讨在网站上添加版权声明的重…

Gitee的原理及应用详解(二)

本系列文章简介&#xff1a; Gitee是一款开源的代码托管平台&#xff0c;是国内最大的代码托管平台之一。它基于Git版本控制系统&#xff0c;提供了代码托管、项目管理、协作开发、代码审查等功能&#xff0c;方便团队协作和项目管理。Gitee的出现&#xff0c;在国内的开发者社…

31.线性变换及对应矩阵

文章目录 1. 线性变换2. 投影矩阵 1. 线性变换 线性代数从线性变换开始&#xff0c;是线性代数的另外一个起点。很多物理学家并不关系坐标的值&#xff0c;而是关系从A坐标系到B坐标系的变化。他们希望知道如何去描述一个变化&#xff0c;而现在我们研究的就是通过矩阵来描述这…

机器人运动轨迹学习——GMM/GMR算法

机器人运动轨迹学习——GMM/GMR算法 前置知识 GMM的英文全称为&#xff1a;Gaussian mixture model&#xff0c;即高斯混合模型&#xff0c;也就是说&#xff0c;它是由多个高斯模型进行混合的结果&#xff1a;当然&#xff0c;这里的混合是带有权重概念的。 一维高斯分布 GMM中…

基于STM32与ESP8266 驱动的智能大棚环境监测控制系统

随着物联网技术的快速发展&#xff0c;智能农业逐渐成为现代农业发展的重要方向。本文介绍了一种基于STM32微控制器和ESP8266 Wi-Fi模块的智能大棚环境监测控制系统。该系统能够实时监测和控制大棚内的环境参数&#xff0c;如温度、湿度、光照强度和土壤湿度等&#xff0c;并通…

win11安装MySQL

目录[-] 1. 1. 下载2. 2. 安装 参考文档&#xff1a;MySQL :: MySQL 8.4 Reference Manual 1. 下载 mysql官网下载msi安装程序&#xff1a;MySQL :: Begin Your Download 2. 安装 运行下载的mis程序,逐步安装。 安装模式&#xff1a; complete; 进入配置&#xff1a; data di…

Spring Boot 项目统一异常处理

在 Spring Boot 项目开发中&#xff0c;异常处理是一个非常重要的环节。良好的异常处理不仅能提高应用的健壮性&#xff0c;还能提升用户体验。本文将介绍如何在 Spring Boot 项目中实现统一异常处理。 统一异常处理有以下几个优点&#xff1a; 提高代码可维护性&#xff1a;…

Linux内核重置root密码

Ubuntu 首先重新启动Ubuntu系统&#xff0c;然后快速按下shift键&#xff0c;以调出grub启动菜单在这里我们选择第二个&#xff08;Ubuntu高级选项&#xff09;&#xff0c;选中后按下Enter键 选择最高的Linux内核版本所对应的recovery mode模式&#xff0c;按e键编辑启动项 在…

【Spring】深入理解 Spring 中的 ImportSelector、Aware 和 Processor 接口

前言 Spring 框架提供了一系列接口和机制&#xff0c;为开发者提供了灵活、可扩展的编程模型。其中&#xff0c;ImportSelector、Aware 接口以及 Processor 系列接口是非常重要的扩展点&#xff0c;本文将深入探讨它们的设计目的、使用方法以及示例应用。 一、ImportSelector…

2024电工杯参赛经历感受总结

1.基本情况 现在的时间是5月25日晚上的7点42分&#xff0c;首先声明&#xff0c;以下内容完全是个人的感情&#xff0c;无不良引导&#xff0c;这个电工杯是我们小队第一次参加数学建模比赛&#xff0c;我们选择的是含有4个小问的B题目&#xff0c;就是这个题目的主题就是针对…

mac brew 命令详解

brew 是 macOS 系统中 Homebrew 的命令行工具&#xff0c;用于在 macOS 上安装、更新和管理各种软件包。以下是对 brew 命令的详细介绍&#xff0c;按照功能和使用频率进行分点和归纳&#xff1a; 1. 安装和卸载软件包 安装软件包&#xff1a;使用 install 命令&#xff0c;后…

springboot 实现跨域的几种方式

1、跨域的原因&#xff1a; 由于同源策略(Same Origin Policy)的限制,浏览器不允许跨域请求。同源策略规定,A网页设置的Cookie、LocalStorage和IndexDB无法被同源以外的网页读取。 2、原因&#xff1a; 1&#xff09;浏览器的同源策略(Same Origin Policy)限制了跨域请求。主要…

leetcode 1774.最接近目标价格的甜点成本

思路&#xff1a;DFS暴力 今天就不整动态规划了&#xff0c;脑子有点用不过来了。 这个题其实暴搜就行了&#xff0c;在暴搜之前&#xff0c;首先定下来初值&#xff0c;也就是冰淇凌的基地&#xff0c;我们一个一个遍历就行了&#xff0c;然后挨个暴搜 这个DFS的类型是指数…

python tuple(元组)

python list&#xff08;列表&#xff09;、创建、访问、内置index、判断in、not in、添加元素、insert、append、extend、列表排序、颠倒顺序、删除元素、remove、pop、clear-CSDN博客 目录 tuple&#xff1a; 元组的主要特点包括&#xff1a; tuple的创建 单个元组需要注…

C++和QML混合编程-C++访问QML元素

QML在处理一些UI显示的时候比较擅长,但当涉及到一些后台业务的时候就比较乏力了。这里介绍一下如何通过C++对QML的能力进行扩展。C++访问操作QML的方式主要分为两种: 1.通过findChild查找QML子元素 2.通过QQmlComponent动态创建元素。 下面分别介绍一下两种方式的详细用法。…

测试用例篇

测试用例的基本要素 **测试用例是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环 **境、操作步骤、测试数据、预期结果等要素.评价测试用例的标准&#xff1a;**对比好坏用例的评价标准 **用例表达清楚&#xff0c;无二义性用例可操作…