provide和inject,Teleport,Fragment

news2024/11/25 11:01:59

在这里插入图片描述
作用:实现祖孙组件间通信

套路:父组件有一个provide选项来提供数据,子组件有一个inject选项来开始使用这些数据

父组件

在这里插入图片描述

只要provide了,那么后代都能拿到,父子之间一般使用props,祖孙组件一般采用provide


响应式数据判断

isRef:检查一个值是否为一个ref 对象

isReactive:检查一个对象是否是由reactive创建的响应式代理

isReadonly:检查一个对象是否是由readonly创建的只读代理

isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理


composition(组合式) Api的优势

Options API存在的问题,在vue2中都是配置式的api,在vue3中就变成了组合式api

那么配置式api有什么问题:

使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改

组合式api的优点:

我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。


Fragment

在Vue2中:组件必须有一个根标签

在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个

Fragment虚拟元素中好处:减少标签层级, 减小内存占用,不会参加渲染

Teleport

种能够将我们的组件html结构移动到指定位置的技术。

在这里插入图片描述

示例:
在这里插入图片描述


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

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

相关文章

TIA博途中文本列表的具体使用方法介绍与示例

TIA博途中文本列表的具体使用方法介绍与示例 一、 文本列表的概念 应用场景:设备的当前操作模式、当前的运行流程、当前的运行状态等 功能介绍:  根据信号数值的不同,显示不同的文本  通过下拉列表选择不同的文本给变量赋值  通过文本列表实现配方元素数值的选择输入…

直播系统开发中如何优化API接口的并发

概述 在直播系统中,API接口并发的优化是非常重要的,因为它可以提高系统的稳定性和性能。本文将介绍一些优化API接口并发的方法。 理解API接口并发 在直播系统中,API接口是用于处理客户端请求的关键组件。由于许多客户端同时连接到系统&…

云计算与多云混合云架构的比较与选择

第一章:引言 随着互联网的迅速发展,云计算逐渐成为了一个热门话题。而随着企业的不断发展,多云混合云架构逐渐成为了一种重要的技术架构。本文将从中国国内资深IT专家的角度,对云计算和多云混合云架构进行比较和选择的分析&#…

IPSec数据报文封装格式详解

以下遵循GMT 0022-2014 IPSec VPN 技术规范。 IPsec提供两种封装协议AH(鉴别头,Authentication Header)和ESP(封装安全载荷,Encapsulation Security Payload)。 AH可以提供无连接的完整性、数据源鉴别和抗重…

Linux 进程通讯 - 共享内存机制

共享内存机制,就是在物理内存中划分一段内存,多个进程间可以共同访问这段内存,也可对这段内存做修改操作,从而达到进程通讯的效果! 共享内存机制是允许两个或多个进程(不相关或有亲缘关系)访问…

JavaWeb02(servlet)

目录 一.servlet 1.1 什么是servlet? 1.2 实现接口,初始代码 1.3 学会配置和映射 1.4 掌握servlet的生命周期 生命周期的各个阶段 1.5 获取servlet初始化参数和上下文参数 1.5.1 初始代码 推荐使用 1.5.2 初始化参数 1.5.3 上下文参数 1.6 servlet应用:处理用户登…

融云 CTO 岑裕:出海技术前沿探索和排「坑」实践

在本文中,你将看到以下内容: 全球通信网络在接入点、链路加速、服务商、协议等层面的动态演进; 进入到具体市场,禁运国、跨国拦截、区域一致性差等细节“坑点”如何应对; 融云如何从技术侧帮助开发者应对本地化用户体…

首发支持NOA的单征程3行泊一体域控,这家Tier1开“卷”

NOA正成为智能驾驶下半场的竞争焦点之一。 显然,NOA所处的L2/L2区间,在技术上仍然属于驾驶辅助领域,但在传统L2级ADAS功能的基础上增强了部分场景的功能ODD。在部分政策允许的国家和地区,可以实现有条件的「解放双手」。 高工智…

centos搭建vue3运行环境

一、安装 nodejs 1.下载&解压 Node.js官网:Download | Node.js cd /usr/local/src/wget -c https://nodejs.org/dist/v16.18.1/node-v16.18.1-linux-x64.tar.xz xz -d node-v16.18.1-linux-x64.tar.xz tar -xf node-v16.18.1-linux-x64.tarmv node-v…

threejs学习随笔(入门篇)

前言:three.js和webgl Three.js经常会和WebGL混淆, 但也并不总是,three.js其实是使用WebGL来绘制三维效果的。 WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码, 这就是Thre…

C语言函数大全-- p 开头的函数

C语言函数大全 本篇介绍C语言函数大全-- p 开头的函数 1. perror 1.1 函数说明 函数声明函数功能void perror(const char *s);用于将当前错误码对应的错误信息打印到标准输出设备(通常是终端)。 参数: s : 用于描述错误类型或…

班级页面设计——【3-相关活动页面】内容使用HTML以及css和Javascripts技术

系列文章目录 班级页面设计——【1-登陆注册页面】_网页制作实现登录注册 班级页面设计——【2-主界面部分】_班级首页展示 文章目录 系列文章目录 前言 一、页面效果介绍 1.1、页面展示 1.2、简单介绍 二、代码展示部分 2.1、html代码部分 2.2、css代码部分 前言 …

C++(继承中)

目录: 1.基类和派生类对象赋值转换 2.派生类当中的6个默认成员函数 --------------------------------------------------------------------------------------------------------------------------- 派生类对象可以赋值给 基类的对象/基类的指针/基类的引用&am…

“量子计算+个性化医疗”!富士通和BSC利用张量网络推进新研究

​ (图片来源:网络) 富士通和巴塞罗那超级计算中心(BSC)正在签署一项合作协议,通过利用临床数据促进个性化医疗,并使用张量网络推进量子模拟技术。 双方将于2023年5月开始联合研究,第一个合作项目旨在利用不…

CSGO搬砖,每天1-2小时,23年最强副业非它莫属(内附操作流程)

自从我学会了CSGO搬运,我发现生活也有了不小的改变,多了一份收入,生活质量也就提高了一份。 其实刚接触CSGO,我压根就不相信这么能挣钱,因为在印象中,游戏供玩家娱乐竞技的,作为我这种技术渣渣…

VUE3如何定义less全局变量

默认已经安装好了less,这里不过多讲。 (1)首先我们需要下载一个插件依赖: npm i style-resources-loader --save-dev (2)VUE3里配置vue.config.js文件内容 代码: const path require("p…

U盘安装Windows11和ubuntu20.04双系统

准备: 一台PC电脑(我的是两个固态硬盘) 一个U盘(最好不小于32G) 下载安装工具: 老白菜u盘启动盘制作工具_u盘启动_u盘装系统下载尽在老白菜官网 最新UltraISO官方免费下载 - UltraISO软碟通中文官方网…

数据结构与算法(九) 树

大家好,我是半虹,这篇文章来讲树 树是一种常见的数据结构,其定义为:由有限个节点组成的具有层次关系的集合 解决树问题的关键是递归,递归的关键是分解子问题 对于树来说,递归函数只要考虑对单个节点如何处…

波奇学Linux:Linux的认识和云服务器使用

在讲Linux前,我们先来理解计算机: 计算机:输入->算法->输出 举个栗子: pritnf :输出到屏幕(硬件)上 我们在计算机所有的行为都会转为硬件行为。 再进一步理解,我们打开visual studio后,敲…

BPF技术学习与整理

目录 eBPF是什么? eBPF是做什么的?可以解决什么问题? eBPF可以带来的解决方案是什么? eBPF的技术点 eBPF hookeBPF MapeBPF Helper FunctioneBPF有什么限制吗? 前言 21年因为项目需求而要开发一个工具,可以…