当前位置: 首页 > 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;从入门到精通 数…...

【GIT版本控制】--提交更改

一、添加文件到暂存区 在GIT中&#xff0c;要提交更改&#xff0c;首先需要将文件添加到暂存区&#xff08;Staging Area&#xff09;。这是一个用于存放将要提交的更改的临时区域。以下是将文件添加到暂存区的步骤&#xff1a; 打开终端或命令提示符&#xff1a;首先&#x…...

解决高分屏DPI缩放PC端百度网盘界面模糊的问题

第一步 更新最新版本 首先&#xff0c;在百度网盘官网下载最新安装包&#xff1a; https://pan.baidu.com/download 进行覆盖安装 第二步 修改兼容性设置 右键百度网盘图标&#xff0c;点击属性&#xff0c;在兼容性选项卡中点击更改所有用户的设置 弹出的选项卡中选择更改高…...

全能视频工具 VideoProc Converter 4K for mac中文

VideoProc 4K提供快速完备的4K影片处理方案&#xff0c;您可以透过这款软体调节输出影片格式和大小。能够有效压缩HD/4K影片体积90%以上&#xff0c;以便更好更快地上传到YouTube&#xff0c;或是通过电子邮件附件发送。业界领先的视讯压缩引擎&#xff0c;让你轻松处理大体积视…...

Vue中实现自定义编辑邮件发送到指定邮箱(纯前端实现)

formspree里面注册账号 注册完成后进入后台新建项目并且新建表单 这一步完成之后你将得到一个地址 最后就是在项目中请求这个地址 关键代码如下&#xff1a; submitForm() {this.fullscreenLoading true;this.$axios({method: "post",url: "https://xxxxxxx…...

计算机专业毕业设计项目推荐11-博客项目(Go+Vue+Mysql)

博客项目&#xff08;GoVueMysql&#xff09; **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式&am…...

QT实现TCP

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);// 此时&#xff0c;服务器已经成功进入监听状态&#xff0c…...

PostgreSQL ash —— pgsentinel插件

一、 插件作用 众所周知&#xff0c;pg是没有像oracle那样的ash视图的&#xff0c;因此要回溯历史问题不太方便。pgsentinel插件会将pg_stat_activity与pg_stat_statements视图内容定期快照&#xff0c;并存入pg_active_session_history和pg_stat_statements_history视图中。 1…...

【刷题笔记10.5】LeetCode:排序链表

LeetCode&#xff1a;排序链表 一、题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 二、分析 这题咱们默认要求&#xff1a;空间复杂度为O(1)。所以这把咱们用自底向上的方法实现归并排序&#xff0c;则可以达到O(1) 的空间复杂…...

三、【色彩模式与颜色填充】

文章目录 Photoshop常用的几种颜色模式包括&#xff1a;1. RGB模式2. CMYK模式3. 灰度模式4. LAB模式5. 多通道模式 Photoshop颜色填充1.色彩基础2.拾色器认识3.颜色填充最后附上流程图&#xff1a; Photoshop常用的几种颜色模式包括&#xff1a; 1. RGB模式 详细可参考&…...

karmada v1.7.0安装指导

前言 安装心得 经过多种方式操作&#xff0c;发现二进制方法安装太复杂&#xff0c;证书生成及其手工操作太多了&#xff0c;没有安装成功&#xff1b;helm方式的安装&#xff0c;v1.7.0的chart包执行安装会报错&#xff0c;手工修复了报错并修改了镜像地址&#xff0c;还是各…...

企业融资方案范本/seo是什么意思 职业

什么是“数字政府”&#xff1f;「数字政府」秉承整体、移动、协同、创新、阳光、集约、共享、可持续建设的理念&#xff0c;湖北十堰市“数字政府”规划建设应坚持以下原则。承上启下&#xff0c;统分结合。“数字政府”的总体框架&#xff0c;依托公共支撑体系&#xff0c;建…...

济宁市建设工程招投标网站/百度搜索风云榜小说总榜

adb shell是什么意思&#xff1f;adb shell就是连接到咱们的KF(android)的终端shell。ADB: Android debug bridge.Android手机实际是基于Linux系统的。在你的android手机的设置中&#xff0c;Settings->Applications->Development->USB debugging勾选上&#xff0c;就…...

eclipse做购物网站/seo按天计费系统

[aligncenter][sizexx-large][b][colorred]tomcat缓存配置[/color][/b][/size][/align]方法一&#xff1a;此方法只适用于命令启动&#xff0c;即startup.battomcat\bin\catalina.bat set JAVA_OPTS%JAVA_OPTS% -Xms768M -Xmx1024M 在这个位置上面添加如上信息 set _EXECJAVA%_…...

专门做加盟的网站/优化大师的作用

1.3.2 问题所在 在了解DVM分配释放内存的机制后&#xff0c;根据dumpsys观察到的现象&#xff0c;猜测可能出现了页利用率问题&#xff08;页内碎片&#xff09;。如图1-13所示&#xff0c;第一行&#xff1a;在开始阶段&#xff0c;内存分配较满。第二行&#xff1a;经过GC&a…...

自己在网站做邮箱/电脑培训中心

前言 目前越来越多的红蓝对抗中&#xff0c;钓鱼邮件攻击使用的越来越频繁&#xff0c;也是比较高效打点的一种方式&#xff0c;常见的钓鱼邮件攻击一种是直接通过二维码&#xff0c;内嵌链接、直接索要敏感信息等方式钓运维人员、内部人员相关的管理账号密码&#xff0c;另一…...

郑州cms建站模板/优化的含义是什么

HTML5 canvas中用于实现动画效果&#xff0c;往往需要用到js中SetInterval与setTimeout&#xff0c;这种定时脚本往往会占用额外的CPU资源。HTML5给我们提供了requestAnimationFrame的方法用于代替它们&#xff0c;但这个requestAnimationFrame却没有提供控制帧速的方法&#x…...