vue3父子通信+ref,toRef,toRefs使用实例
ref是什么?
- 生成值类型的响应式数据
- 可用于模板和reactive
- 通过.value修改值
- 可以获取DOM元素
<p ref=”elemRef”>{{nameRef}} -- {{state.name}}</p>
// 获取dom元素
onMounted(()=>{ console.log(elemRef.value); });
toRef是什么?
- 针对一个响应式对象(reactive封装)的prop属性!!!
- 创建一个ref, 具有响应式
- 两者保持引用关系
toRefs是什么?
- 将响应式对象(reactive封装)转换为普通对象
- 对象的每个prop属性都是对应的ref
- 两者保持引用关系
最佳使用方式
- 用reactive做对象的响应式, 用ref做值类型响应式
- 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, ‘xxx’);
- ref的变量命名都用xxRef
- 合成函数返回响应式对象时, 用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是一款精密的电压-电流转换器是最广泛应用之一。原因有二:一是线性度非常好、二是价格便宜。总结成一点,就是性价比高。 典型电路 最终电路 Z1二极管处输出电流表达式:…...
SpringBoot自带模板引擎Thymeleaf使用详解①
目录 前言 一、SpringBoot静态资源相关目录 二、变量输出 2.1 在templates目录下创建视图index.html 2.2 创建对应的Controller 2.3 在视图展示model中的值 三、操作字符串和时间 3.1 操作字符串 3.2 操作时间 前言 Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎&am…...
推荐算法——Apriori算法原理
0、前言: 首先名字别读错:an pu ruo ao rui 【拼音发音】Apriori是一种推荐算法推荐系统:从海量数据中,帮助用户进行信息的过滤和选择。主要推荐方法有:基于内容的推荐、协同过滤推荐、基于关联规则的推荐、基于知识的…...
vue ant 隐藏 列
vue ant 隐藏 列 如果你使用的是Vue和Ant Design Vue组件库,你可以使用v-if指令来实现条件渲染来隐藏列。以下是一个示例代码: <template><a-table :columns"columns" :data-source"data"><template v-slot:custom…...
java基础之初始化顺序
初始化顺序 在类中变量定义的顺序决定了它们初始化的顺序。在创建任何java对象时,都是依次调用父类非静态初始化块、父类构造器执行初始化、本类的非静态初始化块、本类构造器执行初始化 public class House { // 构造器之前 Window w1 new Window(1); Ho…...
FFmpeg 命令:从入门到精通 | ffmpeg filter(过滤器 / 滤镜)
FFmpeg 命令:从入门到精通 | ffmpeg filter(过滤器 / 滤镜) FFmpeg 命令:从入门到精通 | ffmpeg filter(过滤器 / 滤镜)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小技巧的系列文章。这是第四篇,快速合并字典。 在Python的使用中,有时候需要将两个 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基本指令一 一、学习前提(环境配置)①安装Xshell和云服务器推荐②Xshell用途如下图③打开Xshell 二、 Linux基本指令①whoami和who指令②pwd、ls、ls -l三个指令ls指令扩充 ③cd指令前提了解有了上面的认识,我们就可以开始cd指令的学习了 ④tree指令…...
conda常用命令参数,指定版本,依赖库文件,创建虚拟环境,删除,激活,退出,内部安装包,pip通过代理安装包
以下是conda的常用命令和参数: 1. 创建虚拟环境: - 创建一个新的虚拟环境:conda create -n 环境名 pythonx.x - 使用指定的依赖文件创建虚拟环境:conda create -n 环境名 --file requirements.txt 2. 激活虚拟环境&#x…...
【锁的区别】C++线程库和POSIX线程库锁的区别
C线程库和POSIX线程库锁的区别 C线程库代码段的互斥:mutex、recursive_mutex、timed_mutex、recursive_timed_mutex互斥量mutex:直接进行lock()或者unlock()递归互斥锁recursive_mutex:可以多次加锁,意味着加几次锁就需要解几次锁…...
网络层·IP协议
承接前文TCP协议-CSDN博客 简介 协议头格式 网段划分(重要) 划分方法 IP地址的数量限制(背景介绍) 私有IP地址和公网IP地址(提出解决思路) NAT技术(解决方法) 路由 网络层 在复杂的网络环境中确定一个合适的路径 IP协议 主机: 配有IP地址, 可以认为就是你的电脑; 路由器:…...
RabbitMQ学习笔记(下):延迟队列,发布确认高级,备份交换机
十、延迟队列 延迟队列 概念: 延迟队列使用场景: 流程图: 延迟队列整合Springboot 导入依赖: <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…...
Python 无废话-基础知识面向对象编程详解
类定义 如何理解万物皆对象? 生活中一些事物,动物(可爱的小狗、调皮的小猫)、交通工具(比亚迪U8汽车、飞机)、人(学生、教师)…… 这些对象都有着独特或共性的属性和方法来描述其…...
凉鞋的 Unity 笔记 106. 第二轮循环场景视图Sprite Renderer
106. 第二轮循环&场景视图&Sprite Renderer 从这一篇开始,我们开始进行第二轮循环。 这次我们至少能够在游戏运行窗口看到一些东西。 首先还是在场景层次窗口进行编辑,先创建一个 Sprite,操作如下: 创建后,会在 Scene …...
Vue中如何进行分布式路由配置与管理
Vue中的分布式路由配置与管理 随着现代Web应用程序的复杂性不断增加,分布式路由配置和管理成为了一个重要的主题。Vue.js作为一种流行的前端框架,提供了多种方法来管理Vue应用程序的路由。本文将深入探讨在Vue中如何进行分布式路由配置与管理࿰…...
Solidity 合约漏洞,价值 38BNB 漏洞分析
Solidity 合约漏洞,价值 38BNB 漏洞分析 1. 漏洞简介 https://twitter.com/NumenAlert/status/1626447469361102850 https://twitter.com/bbbb/status/1626392605264351235 2. 相关地址或交易 攻击交易: https://bscscan.com/tx/0x146586f05a451313…...
【C++】:类和对象(2)
朋友们、伙计们,我们又见面了,本期来给大家解读一下有关Linux的基础知识点,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏:C语言:从入门到精通 数…...
【GIT版本控制】--提交更改
一、添加文件到暂存区 在GIT中,要提交更改,首先需要将文件添加到暂存区(Staging Area)。这是一个用于存放将要提交的更改的临时区域。以下是将文件添加到暂存区的步骤: 打开终端或命令提示符:首先&#x…...
解决高分屏DPI缩放PC端百度网盘界面模糊的问题
第一步 更新最新版本 首先,在百度网盘官网下载最新安装包: https://pan.baidu.com/download 进行覆盖安装 第二步 修改兼容性设置 右键百度网盘图标,点击属性,在兼容性选项卡中点击更改所有用户的设置 弹出的选项卡中选择更改高…...
全能视频工具 VideoProc Converter 4K for mac中文
VideoProc 4K提供快速完备的4K影片处理方案,您可以透过这款软体调节输出影片格式和大小。能够有效压缩HD/4K影片体积90%以上,以便更好更快地上传到YouTube,或是通过电子邮件附件发送。业界领先的视讯压缩引擎,让你轻松处理大体积视…...
Vue中实现自定义编辑邮件发送到指定邮箱(纯前端实现)
formspree里面注册账号 注册完成后进入后台新建项目并且新建表单 这一步完成之后你将得到一个地址 最后就是在项目中请求这个地址 关键代码如下: submitForm() {this.fullscreenLoading true;this.$axios({method: "post",url: "https://xxxxxxx…...
计算机专业毕业设计项目推荐11-博客项目(Go+Vue+Mysql)
博客项目(GoVueMysql) **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式&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);// 此时,服务器已经成功进入监听状态,…...
PostgreSQL ash —— pgsentinel插件
一、 插件作用 众所周知,pg是没有像oracle那样的ash视图的,因此要回溯历史问题不太方便。pgsentinel插件会将pg_stat_activity与pg_stat_statements视图内容定期快照,并存入pg_active_session_history和pg_stat_statements_history视图中。 1…...
【刷题笔记10.5】LeetCode:排序链表
LeetCode:排序链表 一、题目描述 给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。 二、分析 这题咱们默认要求:空间复杂度为O(1)。所以这把咱们用自底向上的方法实现归并排序,则可以达到O(1) 的空间复杂…...
三、【色彩模式与颜色填充】
文章目录 Photoshop常用的几种颜色模式包括:1. RGB模式2. CMYK模式3. 灰度模式4. LAB模式5. 多通道模式 Photoshop颜色填充1.色彩基础2.拾色器认识3.颜色填充最后附上流程图: Photoshop常用的几种颜色模式包括: 1. RGB模式 详细可参考&…...
karmada v1.7.0安装指导
前言 安装心得 经过多种方式操作,发现二进制方法安装太复杂,证书生成及其手工操作太多了,没有安装成功;helm方式的安装,v1.7.0的chart包执行安装会报错,手工修复了报错并修改了镜像地址,还是各…...
企业融资方案范本/seo是什么意思 职业
什么是“数字政府”?「数字政府」秉承整体、移动、协同、创新、阳光、集约、共享、可持续建设的理念,湖北十堰市“数字政府”规划建设应坚持以下原则。承上启下,统分结合。“数字政府”的总体框架,依托公共支撑体系,建…...
济宁市建设工程招投标网站/百度搜索风云榜小说总榜
adb shell是什么意思?adb shell就是连接到咱们的KF(android)的终端shell。ADB: Android debug bridge.Android手机实际是基于Linux系统的。在你的android手机的设置中,Settings->Applications->Development->USB debugging勾选上,就…...
eclipse做购物网站/seo按天计费系统
[aligncenter][sizexx-large][b][colorred]tomcat缓存配置[/color][/b][/size][/align]方法一:此方法只适用于命令启动,即startup.battomcat\bin\catalina.bat set JAVA_OPTS%JAVA_OPTS% -Xms768M -Xmx1024M 在这个位置上面添加如上信息 set _EXECJAVA%_…...
专门做加盟的网站/优化大师的作用
1.3.2 问题所在 在了解DVM分配释放内存的机制后,根据dumpsys观察到的现象,猜测可能出现了页利用率问题(页内碎片)。如图1-13所示,第一行:在开始阶段,内存分配较满。第二行:经过GC&a…...
自己在网站做邮箱/电脑培训中心
前言 目前越来越多的红蓝对抗中,钓鱼邮件攻击使用的越来越频繁,也是比较高效打点的一种方式,常见的钓鱼邮件攻击一种是直接通过二维码,内嵌链接、直接索要敏感信息等方式钓运维人员、内部人员相关的管理账号密码,另一…...
郑州cms建站模板/优化的含义是什么
HTML5 canvas中用于实现动画效果,往往需要用到js中SetInterval与setTimeout,这种定时脚本往往会占用额外的CPU资源。HTML5给我们提供了requestAnimationFrame的方法用于代替它们,但这个requestAnimationFrame却没有提供控制帧速的方法&#x…...