vue3透传、注入
属性透传
- 传递给子组件时,没有被子组件消费的属性或事件,常见的如id、class
注意1
- 1.class、style是合并的,style中如果出现重复的样式,以透传属性为准
- 2.id属性是以透传属性为准,其他情况透传属性名相同,取值以透传属性为准
APP.vue
<template><div><A style="color: red" id="first" class="app"></A></div>
</template>A组件
<template><div id="second" class="a" style="color:blue; border: 1px solid gray;"><h2>A</h2></div>
</template>最终html
<div id="first" class="a app" style="color: red; border: 1px solid gray;"><h2>A</h2></div>

注意2
- 1.多个根节点的时候,可以为需要使用透传属性的根节点绑定v-bind=“$attrs”,来确定透传属性的归属
APP.vue
<template><div><A style="color: red" id="first" class="app"></A></div>
</template>A组件
<template><div ><h2>A1</h2></div><div v-bind="$attrs"><h2>A2</h2></div>
</template>最终html
<div><div><h2>A1</h2></div><div id="first" class="app" style="color: red;"><h2>A2</h2></div>
</div>

注意3
- 1.多层透传,可以通过defineOptions({inheritAttrs:false})来实现
- 2.透传属性使用:
- 模板中可以直接使用$attrs.id 这种方式
- 在js中如果在setup语法糖中,可以用useAttrs
- js中非
<script setup>
import { useAttrs } from 'vue';
const aa = useAttrs()
console.log(aa) //aa是一个proxy对象,在子组件中不能修改
</script>

APP.vue
<template><div><A style="color: red" id="first" class="app"></A></div>
</template>A组件
<template><div id="second"><h2>A</h2><B v-bind="$attrs"></B></div>
</template><script setup>
import B from "./B.vue"
import {defineOptions} from 'vue'
defineOptions({inheritAttrs:false
})
</script>B组件
<template><div><h5>B</h5><p>{{ $attrs.id }}</p></div>
</template>最终html
<div><div id="second"><h2>A</h2><div id="first" class="app" style="color: red;"><h5>B</h5><p>first</p></div></div>
</div>

注入
- 为了解决参数逐层传递问题
注意
- 1.上层组件作为提供方,下层组件使用,比如父组件是提供方,子组件使用;也可以提供全局属性
- 2.provide 和 inject 方法需要在 setup 方法中同步调用
- 3.修改provide属性的方式最好放在提供方,统一修改
- 4.注入时,可以提供一个默认值,如果没有该属性的提供方,返回的为默认值
- 5.provide的数据可以为任意类型,inject后不会改变数据类型
- 6.可以通过Symbol 来避免注入名冲突
APP.vue
<template><div><A></A></div>
</template>
<script setup>
import {ref,provide} from 'vue'
import A from "./components/A.vue"
const first = ref("first")
const num = ref(1)
function updateFirst(val){first.value = val
}
provide("first",{first,updateFirst
})
provide("num",num)
</script>
A组件
<template><div><h2>A</h2><B></B></div>
</template><script setup>
import { provide, reactive } from "vue";
import B from "./B.vue"
const obj = reactive({name:"zhangsan"
})
provide("obj",obj)
</script>
B组件
<template><div style="border: 1px solid gray;"><h5>B</h5><p>first:{{ first}}</p><p><button @click="updateFirst('inject first')">change first</button></p><p>默认值:{{ defaultTest }}</p><hr/><p>num:{{ num }}--{{ typeof num }}</p><p>num+1: {{ num+1 }}</p></div>
</template>
<script setup>
import { inject } from 'vue';
const {first,updateFirst} = inject("first")
console.log("first:",first)
const defaultTest = inject('defaultTest',"test 默认值")
//ref 数值
const num = inject("num")
//reactive
const obj = inject("obj")
console.log(obj)
</script>


相关文章:
vue3透传、注入
属性透传 传递给子组件时,没有被子组件消费的属性或事件,常见的如id、class 注意1 1.class、style是合并的,style中如果出现重复的样式,以透传属性为准2.id属性是以透传属性为准,其他情况透传属性名相同,…...
数模原理精解【9】
文章目录 混合高斯分布概述定义性质参数估计计算Julia实现 详述定义原理 核心参数1. 均值(Means)2. 协方差矩阵(Covariance Matrices)3. 权重(Weights)4. 聚类个数(高斯模型个数,K&a…...
Java中的linkedList类及与ArrayList的异同
继承实现关系 public class LinkedList<E>extends AbstractSequentialList<E>implements List<E>, Deque<E>, Cloneable, java.io.Serializable 由于涉及的类过多,画起来过于繁琐,这里只展示最外层的继承实现关系 可以看到它是…...
【精选】文件摆渡系统:跨网文件传输的安全与效率之选
文件摆渡系统可以解决哪些问题? 文件摆渡系统(File Shuttle System)主要是应用于不同网络、网段、区域之间的文件数据传输流转场景, 用于解决以下几类问题: 文件传输问题: 大文件传输:系统可…...
tkinter 电子时钟 实现时间日期 可实现透明 无标题栏
下面是一个使用tkinter库实现的简单电子时钟的例子,可以显示当前的日期和时间,并且可以设置窗口为透明且无标题栏。 import tkinter as tk import timedef update_time():current_time time.strftime("%Y-%m-%d %H:%M:%S")label.config(text…...
【hot100-java】【除自身以外数组的乘积】
R8-普通数组篇 印象题,计算前缀,计算后缀,计算乘积。 class Solution {public int[] productExceptSelf(int[] nums) {int n nums.length;int[] prenew int[n];pre[0]1;for (int i1;i<n;i){pre[i]pre[i-1]*nums[i-1];}int[] sufnew int[…...
【Python机器学习】循环神经网络(RNN)——审察模型内部情况
Keras附带了一些工具,比如model.summary(),用于审察模型内部情况。随着模型变得越来越复杂,我们需要经常使用model.summary(),否则在调整超参数时跟踪模型内部的内容的变化情况会变得非常费力。如果我们将模型的摘要以及验证的测试…...
智能语音交互:人工智能如何改变我们的沟通方式?
在科技飞速发展的今天,人工智能(AI)已经渗透到我们生活的方方面面。其中,智能语音交互作为AI技术的一个重要分支,正以前所未有的速度改变着我们的沟通方式。从智能家居的控制到办公自动化的应用,再到日常交…...
vue3中动态引入本地图片的两种方法
方法一 <img width"10" height"10":src"/src/assets/nncs2/jiantou${index 1}.png" alt"" /> 推荐 简单好用 方法二 const getImg index > {const modules import.meta.glob(/assets/nncs2/**/*.{png,svg,jpg,jpeg}, { …...
Linux网络——socket编程与UDP实现服务器与客户机通信
文章目录 端口号TCP/UDP网络字节序socket的常见APIUDP实现服务器与客户机通信服务器客户机运行效果如下 端口号 我们说即便是计算机网络,他们之间的通信也仍然是进程间通信 那么要如何在这么多计算机中,找到你想要的那个进程呢 在网络中标识的唯一的计…...
大型语言模型中推理链的演绎验证
大语言模型(LLMs)在执行各种推理任务时,由于引入了链式推理(Chain-of-Thought,CoT)提示,显著受益。尽管CoT使模型产生更全面的推理过程,但其对中间推理步骤的强调可能会无意中引入幻…...
openharmony 应用支持常驻和自启动
本文环境: devEco studio 版本 4.0.0.600 SDK版本:3.2.12.5 full SDK 应用模型:Stage 功能简介: OpenHarmony支持包含ServiceExtensionAbility类型模块的应用配置常驻和自启动。 关于ServiceExtensionAbility其他的介绍可以参考官网:ServiceExtensionAbility(仅对…...
Winform中引入WPF控件后键盘输入无响应
引言 Winform中如何引入WPF控件的教程很多,对于我们直接通过ElementHost引入的直接显示控件,它是可以响应键盘输入消息的,但对于在WFP中弹出的窗体来说,此时是无法响应我们的键盘输入的。我们需要给它使能键盘输入。 1、使能键盘…...
多线程——死锁
死锁 在Java中使用多线程,就会有可能导致死锁问题。死锁会让程序一直卡住,程序不再往下执行。 我们只能通过中止并重启的方式来让程序重新执行。 这是我们非常不愿意看到的一种现象,我们要尽可能避免死锁的情况发生! 死锁的原因…...
链路追踪可视化利器之火焰图
随着现代化技术的发展,为了能够保证 IT 系统的稳定性、高扩容性,企业往往采用分布式的方式来构建 IT 系统。但也正因为如此,IT 系统中涉及到的服务和组件可能被分布在不同的服务器、数据中心甚至不同的地理位置,这导致应用发生故障…...
C语言 ——— 条件编译指令实际用途
目录 前言 头文件被包含的方式 嵌套文件包含 使用条件编译指令规避头文件多次包含 还有一个编译指令,同样能做到以上功能 前言 条件编译指令多用于对头文件的定义和判断以及删除 头文件被包含的方式 本地文件包含(也就是自己创建的头文件ÿ…...
备战软考Day01-计算机系统
1.数值及其转化 1.数值转化(十进制) 2.十进制推广 3.进制转化 4.数据表示 1.原码 2.反码 3.补码 4.移码 5.定点数 就是小数点的位置固定不变的数。小数点的位置通常有两种约定方式:定点整数(纯整数,小数点在最低有效数值位之后…...
从C语言过渡到C++
📔个人主页📚:秋邱-CSDN博客☀️专属专栏✨:C 🏅往期回顾🏆:单链表实现:从理论到代码-CSDN博客🌟其他专栏🌟:C语言_秋邱的博客-CSDN博客 目录 …...
Docker 的安装和使用
参考资料: 通俗易懂了解什么是docker?Docker 教程 | 菜鸟教程Ubuntu 22.04 安装 DockerDocker 超详细基础教程WSL2 支持 systemctl 命令systemd 和 systemctl 是什么?使用正确的命令重启 WSL 子系统Ubuntu 修改源镜像方法Docker 中出现 ‘/etc/resolv.…...
鸿蒙轻内核A核源码分析系列七 进程管理 (2)
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 轻内核A核源码分析系列一 数据结构-双向循环链表 轻内核A核源码分析系列二 数据结构-位图操作 轻内核A核源码分析系列三 物理内存(1࿰…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
Qt Quick Controls模块功能及架构
Qt Quick Controls是Qt Quick的一个附加模块,提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中,这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构,与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...
生产管理系统开发:专业软件开发公司的实践与思考
生产管理系统开发的关键点 在当前制造业智能化升级的转型背景下,生产管理系统开发正逐步成为企业优化生产流程的重要技术手段。不同行业、不同规模的企业在推进生产管理数字化转型过程中,面临的挑战存在显著差异。本文结合具体实践案例,分析…...
[C++错误经验]case语句跳过变量初始化
标题:[C错误经验]case语句跳过变量初始化 水墨不写bug 文章目录 一、错误信息复现二、错误分析三、解决方法 一、错误信息复现 write.cc:80:14: error: jump to case label80 | case 2:| ^ write.cc:76:20: note: crosses initialization…...
实现p2p的webrtc-srs版本
1. 基本知识 1.1 webrtc 一、WebRTC的本质:实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力,二者在架构设计和功能定位上高度相似: 分层协议栈架构 Linux网络协议栈:从底层物理层到应用层(如…...
rk3506上移植lvgl应用
本文档介绍如何在开发板上运行以及移植LVGL。 1. 移植准备 硬件环境:开发板及其配套屏幕 开发板镜像 主机环境:Ubuntu 22.04.5 2. LVGL启动 出厂系统默认配置了 LVGL,并且上电之后默认会启动 一个LVGL应用 。 LVGL 的启动脚本为/etc/init.d/pre_init/S00-lv_demo,…...
Three.js进阶之粒子系统(一)
一些特定模糊现象,经常使用粒子系统模拟,如火焰、爆炸等。Three.js提供了多种粒子系统,下面介绍粒子系统 一、Sprite粒子系统 使用场景:下雨、下雪、烟花 ce使用代码: var materialnew THRESS.SpriteMaterial();//…...
