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

vue3父子通信+ref,toRef,toRefs使用实例

ref是什么?

  1. 生成值类型的响应式数据
  2. 可用于模板和reactive
  3. 通过.value修改值
  4. 可以获取DOM元素

<p ref=”elemRef”>{{nameRef}} -- {{state.name}}</p>

// 获取dom元素

onMounted(()=>{ console.log(elemRef.value); });

toRef是什么?

  1. 针对一个响应式对象(reactive封装)的prop属性!!!
  2. 创建一个ref, 具有响应式
  3. 两者保持引用关系

toRefs是什么?

  1. 将响应式对象(reactive封装)转换为普通对象
  2. 对象的每个prop属性都是对应的ref
  3. 两者保持引用关系

最佳使用方式

  1. 用reactive做对象的响应式, 用ref做值类型响应式
  2. 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, ‘xxx’);
  3. ref的变量命名都用xxRef
  4. 合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数);

使用示例:

1. 子组件, script标签是这种写法: <script setup lang="ts">时

<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// 父组件传数据 :msg="xxx"
defineProps({msg: String
});
// 子组件通知父组件使用@onSayHello="xxx", 子组件需要使用时eg: emites('onSayHello', 'hello啊啊啊啊')
interface IEmits {(e: 'onSayHello', arg1: String): void;
}
const emites = defineEmits<IEmits>();
const state = reactive({name: 'alice',age: 20,sex: '女'
});// 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量
const stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
const sexRef = toRef(state, 'sex')
const sayHello2 = () => {msgRef.value = '你好!'emites('onSayHello', 'hello-----')
}
// xx.key = ???适用于reactive封装的响应式对象
const updateState = () => {state.name = '双双';state.age = 22;state.sex = '男';// 或者找到响应式值类型,使用 .value进行修改// nameRef.value = '双双'// ageRef.value = 22// sexRef.value = '男'
}
// ref值类型, 使用.value进行修改
const updateRef = () => {msgRef.value = 'hello!'
}const msgRef = ref('值类型');
</script><template><h1>{{ msg }}</h1><h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}</h1><button @click="sayHello2">打招呼</button><button @click="updateState">修改名字,年龄,性别</button><button @click="updateRef">用英文打招呼</button>
</template><style scoped>
.read-the-docs {color: #888;
}button {margin: 10px;
}
</style>

2. 子组件, script标签是这种写法: <script>时

<script>
import { ref, reactive, toRef, toRefs } from 'vue'
export default {props: {msg: String},emits: ['onSayHello'],setup(props, { emit }) {console.log(props); // 父组件传进来的数据const state = reactive({name: 'alice',age: 20,sex: 1});// 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量const stateRef = toRefs(state);const { name: nameRef, age: ageRef } = stateRef// 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式const sexRef = toRef(state, 'sex')const sayHello2 = () => {msgRef.value = 'hello, 你好!'emit('onSayHello', 'hello-----')}// xx.key = ???适用于reactive封装的响应式对象const updateState = () => {state.name = '双双';state.age = 22;state.sex = 0;}// ref值类型, 使用.value进行修改const updateRef = () => {msgRef.value = '你好啊!'ageRef.value = 33sexRef.value = '男'}const msgRef = ref('值类型');// 注意要返回变量和方法等模板需要使用的东西, 否则页面不会渲染return {msgRef,sayHello2,nameRef,ageRef,sexRef,updateState,updateRef,}}
}
</script><template><h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}</h1><button @click="sayHello2">say hello</button><button @click="updateState">修改state的值</button><button @click="updateRef">修改ref的值</button>
</template><style scoped>
button {margin: 10px;
}
</style>

父组件: App.vue

<script setup>
import HelloWorld from './components/Test2.vue'
function onSayHello(a) {console.log(a)
}
</script><template><HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template><style scoped>
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

相关文章:

vue3父子通信+ref,toRef,toRefs使用实例

ref是什么? 生成值类型的响应式数据可用于模板和reactive通过.value修改值可以获取DOM元素 <p ref”elemRef”>{{nameRef}} -- {{state.name}}</p> // 获取dom元素 onMounted(()>{ console.log(elemRef.value); }); toRef是什么? 针对一个响应式对象(rea…...

输入电压转化为电流性 5~20mA方案

输入电压转化为电流性 5~20mA方案 方案一方案二方案三 方案一 XTR111是一款精密的电压-电流转换器是最广泛应用之一。原因有二&#xff1a;一是线性度非常好、二是价格便宜。总结成一点&#xff0c;就是性价比高。 典型电路 最终电路 Z1二极管处输出电流表达式&#xff1a;…...

SpringBoot自带模板引擎Thymeleaf使用详解①

目录 前言 一、SpringBoot静态资源相关目录 二、变量输出 2.1 在templates目录下创建视图index.html 2.2 创建对应的Controller 2.3 在视图展示model中的值 三、操作字符串和时间 3.1 操作字符串 3.2 操作时间 前言 Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎&am…...

推荐算法——Apriori算法原理

0、前言&#xff1a; 首先名字别读错&#xff1a;an pu ruo ao rui 【拼音发音】Apriori是一种推荐算法推荐系统&#xff1a;从海量数据中&#xff0c;帮助用户进行信息的过滤和选择。主要推荐方法有&#xff1a;基于内容的推荐、协同过滤推荐、基于关联规则的推荐、基于知识的…...

vue ant 隐藏 列

vue ant 隐藏 列 如果你使用的是Vue和Ant Design Vue组件库&#xff0c;你可以使用v-if指令来实现条件渲染来隐藏列。以下是一个示例代码&#xff1a; <template><a-table :columns"columns" :data-source"data"><template v-slot:custom…...

java基础之初始化顺序

初始化顺序 在类中变量定义的顺序决定了它们初始化的顺序。在创建任何java对象时&#xff0c;都是依次调用父类非静态初始化块、父类构造器执行初始化、本类的非静态初始化块、本类构造器执行初始化 public class House { // 构造器之前 Window w1 new Window(1); Ho…...

FFmpeg 命令:从入门到精通 | ffmpeg filter(过滤器 / 滤镜)

FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09; FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09;ffmpeg fliter 基本内置变量视频裁剪文字水印图片水印画中画视频多宫格处理 FFmpeg 命…...

【C语言】23-结构体类型

目录 1. 如何建立结构体类型2. 如何使用结构体2.1 定义结构体变量2.2 结构体变量的初始化和引用2.3 结构体数组2.4 结构体指针2.4.1 指向结构体变量的指针2.4.2 指向结构体数组的指针C 语言提供了一些由系统已定义好的数据类型,如: int、 float、 char 等,用户可以在程序…...

Python小技巧:快速合并字典dict()

文章目录 前言知识点字典合并1. dict.update()基础合并2. 字典推导式 update() 后话 前言 这里是Python小技巧的系列文章。这是第四篇&#xff0c;快速合并字典。 在Python的使用中&#xff0c;有时候需要将两个 dict(字典) 进行合并。 通常我们会借助 dict(字典) 的内置方法 …...

如何使用 React 和 Docusaurus 编写的一些自定义钩子(Hook)

import useRouteContext from @docusaurus/useRouteContext; import {DependencyList, useEffect, useRef, useState, useMemo } from react; import {dequal } from dequal; /* eslint-disable global-require */ // @ts-ignore/*** 用于深度检测依赖的useMemo钩子* @param fa…...

【初识Linux】Linux环境配置、Linux的基本指令 一

Linux基本指令一 一、学习前提(环境配置&#xff09;①安装Xshell和云服务器推荐②Xshell用途如下图③打开Xshell 二、 Linux基本指令①whoami和who指令②pwd、ls、ls -l三个指令ls指令扩充 ③cd指令前提了解有了上面的认识&#xff0c;我们就可以开始cd指令的学习了 ④tree指令…...

conda常用命令参数,指定版本,依赖库文件,创建虚拟环境,删除,激活,退出,内部安装包,pip通过代理安装包

以下是conda的常用命令和参数&#xff1a; 1. 创建虚拟环境&#xff1a; - 创建一个新的虚拟环境&#xff1a;conda create -n 环境名 pythonx.x - 使用指定的依赖文件创建虚拟环境&#xff1a;conda create -n 环境名 --file requirements.txt 2. 激活虚拟环境&#x…...

【锁的区别】C++线程库和POSIX线程库锁的区别

C线程库和POSIX线程库锁的区别 C线程库代码段的互斥&#xff1a;mutex、recursive_mutex、timed_mutex、recursive_timed_mutex互斥量mutex&#xff1a;直接进行lock()或者unlock()递归互斥锁recursive_mutex&#xff1a;可以多次加锁&#xff0c;意味着加几次锁就需要解几次锁…...

网络层·IP协议

承接前文TCP协议-CSDN博客 简介 协议头格式 网段划分(重要) 划分方法 IP地址的数量限制(背景介绍) 私有IP地址和公网IP地址(提出解决思路) NAT技术(解决方法) 路由 网络层 在复杂的网络环境中确定一个合适的路径 IP协议 主机: 配有IP地址, 可以认为就是你的电脑; 路由器:…...

RabbitMQ学习笔记(下):延迟队列,发布确认高级,备份交换机

十、延迟队列 延迟队列 概念&#xff1a; 延迟队列使用场景&#xff1a; 流程图&#xff1a; 延迟队列整合Springboot 导入依赖&#xff1a; <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…...

Python 无废话-基础知识面向对象编程详解

类定义 如何理解万物皆对象&#xff1f; 生活中一些事物&#xff0c;动物&#xff08;可爱的小狗、调皮的小猫&#xff09;、交通工具&#xff08;比亚迪U8汽车、飞机&#xff09;、人&#xff08;学生、教师&#xff09;…… 这些对象都有着独特或共性的属性和方法来描述其…...

凉鞋的 Unity 笔记 106. 第二轮循环场景视图Sprite Renderer

106. 第二轮循环&场景视图&Sprite Renderer 从这一篇开始&#xff0c;我们开始进行第二轮循环。 这次我们至少能够在游戏运行窗口看到一些东西。 首先还是在场景层次窗口进行编辑&#xff0c;先创建一个 Sprite&#xff0c;操作如下: 创建后&#xff0c;会在 Scene …...

Vue中如何进行分布式路由配置与管理

Vue中的分布式路由配置与管理 随着现代Web应用程序的复杂性不断增加&#xff0c;分布式路由配置和管理成为了一个重要的主题。Vue.js作为一种流行的前端框架&#xff0c;提供了多种方法来管理Vue应用程序的路由。本文将深入探讨在Vue中如何进行分布式路由配置与管理&#xff0…...

Solidity 合约漏洞,价值 38BNB 漏洞分析

Solidity 合约漏洞&#xff0c;价值 38BNB 漏洞分析 1. 漏洞简介 https://twitter.com/NumenAlert/status/1626447469361102850 https://twitter.com/bbbb/status/1626392605264351235 2. 相关地址或交易 攻击交易&#xff1a; https://bscscan.com/tx/0x146586f05a451313…...

【C++】:类和对象(2)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux的基础知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...