Vue-透传Attributes使用解析

news2025/1/8 3:44:59

透传是vue中一种特性,官方的解释是:“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyleid。这句话解释过来就是一些不被prop定义的属性直接添加到子组件上的时候,子组件是可以获取到的,只不过获取的方式是通过方法获取的,下面我们展开说一下

几个特性:

  • 透传的属性只会直接传给单根节点的组件,如果子组件不是一个根节点,那么透传属性会直接失效,并且警告
  • 子节点如果不是单根节点的时候,可以通过添加v-bind=“$attrs” 的属性进行某一个dom元素的透传
  • 透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主
  • 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面
  • 透传的子组件里面如果只有一个根节点,这个根节点是另一个组件的时候,透传的属性会直接传递给他本身的子组件
  • 透传过去的属性ID获取需要在dom节点加载结束进行,否则是获取不到的

以上特性我们挨个说一下

透传的属性只会直接传给单根节点的组件
子组件attrs

在这里插入图片描述

父组件

在这里插入图片描述

在这里插入图片描述

这个时候效果是没问题的,但是如果我们给子组件添加一个节点
在这里插入图片描述

在这里插入图片描述

这个时候self-btn的样式并没有传递出去,因为和这个时候他并不知道要传递给哪一个dom元素,同时会曝这样一条警告

在这里插入图片描述

子节点如果不是单根节点的时候,可以通过添加v-bind=“$attrs” 的属性进行某一个dom元素的透传

这个时候我们给其中一个添加上v-bind="$attrs"属性

在这里插入图片描述

在这里插入图片描述

此时的警告也没有了,通过这样的方式我们可以进行自己决定透传给哪一个dom元素

透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主
透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面

这两个通过上面的例子相信你们已经看出来了,这里就不做演示了

透传的子组件里面如果只有一个根节点,这个根节点是另一个组件的时候,透传的属性会直接传递给他本身的子组件

我们在子组件中再引入另一个组件进行尝试 : deepAttrs

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

透传过去的属性ID获取需要在dom节点加载结束进行,否则是获取不到的

既然可以透传属性,那么我们传递过去的ref和id理论上也是可以直接被获取到的,代码尝试一下

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

可以看到上面打印的结果是可以获取到的,但是如果是直接获取的话,dom元素是null,也就是直接获取的话,会因为dom加载顺序的问题导致获取不到最后的dom,这里需要注意一点

可能存在的疑问

  • 如果我子组件只有一个根节点,但是我不想被透传怎么办呢?

在这里插入图片描述

如上所示,我们给js模块部分添加 inheritAttrs:false即可,默认的值是true,设置为false的时候透传的属性久不存在了

  • 我怎么在js中获取到透传的属性呢?

在这里插入图片描述

在这里插入图片描述

使用useAttrs即可获取到对应的透传过来的属性

  • 如果我不适用setup的语法糖进行呢?
    在这里插入图片描述

这里直接使用官网的例子给解答

以上就是关于vue中透传的一些使用,我工作中用的说实话不太多,但是这种东西就是用不到的时候觉得没有什么用,但是一旦用到了,就会觉得特别的实用,所以还是很有必要了解一下的,上面说的不对的还希望及时指出来,鄙人会及时纠正,避免误导。

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

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

相关文章

面对层出不穷的问题,延迟开学的原因就是取消延时服务?

面对层出不穷的问题,延迟开学的原因就是取消延时服务? #延迟开学#请问为什么要延迟?疫情期间说要回家可以理解, 这两天都传着说郑州市的中小学、幼儿园推迟开学了,到底有没有这种情况?我们现在又来到了郑…

零基础入行软件测试怎么学习~

随着近几年软件测试行业的异军突起,加之这又是个进入门槛相对较低的行业,导致不少人都想从事这个岗位。那么,许多初学者在一开始都会想知道,零基础入门软件测试要学什么?希望本文可以对大家的软件测试学习之路有一定的指导意义&a…

Vue实现考勤记录删除-自定义右击删除菜单

一、定义和使用oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。注意&#xff1a;所有浏览器都支持 oncontextmenu 事件&#xff0c; contextmenu 元素只有 Firefox 浏览器支持。二、语法HTML 中:<element oncontextmenu"myScript">JavaScript…

RabbitMQ面试题

什么是 MQ MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已。 还是一种跨进程的通信机制&#xff0c;用于上下游传递消息。 在互联网架构中&#xff0c;MQ 是一种非常常见的…

一文走进多核架构下的内存模

一、走进多核编程CPU 发展早期阶段&#xff0c;性能的提升主要来自于主频的提升和架构的优化&#xff0c;当这条优化途径出现瓶颈后&#xff0c;多核 CPU 开始流行起来。多核心同时执行任务极大地提高了系统整体性能&#xff0c;但也对硬件架构和软件编写提出了更大的挑战。各个…

C语言#define的用法

#define 叫做宏定义命令&#xff0c;它也是C语言预处理命令的一种。所谓宏定义&#xff0c;就是用一个标识符来表示一个字符串&#xff0c;如果在后面的代码中出现了该标识符&#xff0c;那么就全部替换成指定的字符串。我们先通过一个例子来看一下 #define 的用法&#xff1a;…

【Spring(九)】带你了解Spring整合MyBatis的详细过程

文章目录前言Spring整合mybatis思路分析Spring整合MyBatis总结前言 前面我们已经学习完了Spring的注解开发&#xff0c;接下来我们来学习Spring整合MyBatis&#x1f4aa;&#x1f4aa;。 Spring整合mybatis思路分析 整合其实我们在核心容器中已经完成了一个东西了:DruidDataSou…

Hue使用

文章目录HUE功能概览界面介绍Quick browseApp应用 App* 编辑器 【Editor】调度器 【Scheduler】浏览 Browsers*【Documents】【File Browser】HDFS【Job Browser】YARN、oozie【Table Browser】Hive、mysql、SQLite...【HBase Browser】HbaseHUE 在hue.ini 配置集成其他服务&a…

Doris-1.2.0安装部署详细流程

doris介绍 Doris是一个MPP的OLAP系统&#xff0c;以较低的成本提供在大数据集上的高性能分析和报表查询功能。 MPP (Massively Parallel Processing)&#xff0c;即大规模并行处理。简单来说&#xff0c;MPP是将任务并行的分散到多个服务器和节点上&#xff0c;在每个节点上计…

Power BI中创建父子层级二:父级单独产生值

一、父子层级 在数据分析中&#xff0c;经常会遇到父子层级问题&#xff0c;通常来说&#xff0c;父子层级又可以分为两种情况&#xff0c;一种为图1&#xff0c;江苏中烟的销量就是南京品牌和苏烟品牌的销量之和&#xff0c;南京品牌的销量就是南京&#xff08;硬红&#xff…

cocos开发微信小游戏ci机器人实践

1.cocos使用命令行发布微信小游戏项目 1.1 先编辑微信小游戏构建发布配置&#xff0c;然后导出配置&#xff0c;会生成一个buildConfig_wechatgame.json的配置文件 1.2 使用命令行构建微信小游戏项目 D:\CocosDashboard\resources.editors\Creator\3.4.2\CocosCreator.exe --…

硅烷试剂1873-77-4_Tris(trimethylsilyl)silane_三(三甲基硅基)硅烷

●中文名&#xff1a;三(三甲基硅基)硅烷&#xff0c;三(三甲硅基)硅烷●英文名&#xff1a;TRIS(TRIMETHYLSILYL)SILANE&#xff0c;Tris&#xff08;trimethylsilyl&#xff09;Silane&#xff0c;Tris(trimethylsilyl)silaneTris(trimethylsilyl)silane中含有硅烷基&#xf…

JavaScript 中清空数组的几种方法

目录 Array.prototype.splice() 将 length 设置为 0 分配新的空数组 length 0和 Array [] 之间的差异&#xff1f; JavaScript 中清空数组的几种方法多少人都想走出浪浪山 &#x1f9e8;&#x1f9e8;&#x1f9e8; Array.prototype.splice() let course [HTML, CSS, Java…

第四章.神经网络—线性神经网络,Delta学习规则

第四章.神经网络 4.2 线性神经网络与Delta学习规则 线性神经网络在结构上与感知器非常相似&#xff0c;只是激活函数不同。在模型训练时把原来的sign函数改成purelin函数:y x 1.激活函数 2.线性神经网络示例 1).题目&#xff1a; 假设平面坐标系上有四个点&#xff0c;(3,3)…

基于python的二手房数据分析,思路+代码范例

本篇博客将基于 Python &#xff0c;梳理二手房数据分析的整体过程。 文章目录思路整理数据分析步骤的示例代码基于 Python 的二手房分析 | 另一种代码思路整理 数据收集&#xff1a;从网站或其他数据源收集二手房数据&#xff0c;并将其存储在 CSV 或其他数据格式中。数据清洗…

Python连接Liunx中mysql数据库-多表查询【10个经典案例】

关于Python连接liunx中mysql数据库的方式在这一篇文章 Python连接Liunx中mysql数据库-保姆级教程 关于Python针对liunx中的mysql数据库进行增删改查操作的文章在这一篇可以看一下 Python连接Liunx中mysql数据库-增删改查 对于单表查询的学习可以看这一篇文章 Python对liunx中my…

帆软FineReport 实现省市区树形联动

在项目数据展示中&#xff0c;涉及到行政区划&#xff0c;省市区三级联动&#xff0c;运用帆软FineReport该如何实现&#xff0c;记录下来&#xff0c;方便备查。 第一步、树形数据准备 行政区划主要分为三级&#xff0c;即省市区&#xff0c;特殊的包含四个直辖市&#xff0…

【人机交互】COMP5517 HCI 课程笔记

人机交互Class 1: Overview of Human Computer Interaction人机交互的目标What does HCI involveClass 1 ContentImportance of HCISteps of HCISome HCI ProductsClass 1: Overview of Human Computer Interaction 人机交互的目标 Methods for grounding the design in real…

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jan 2023)

Windows 11, version 22H2&#xff0c;2023 年 1 月 更新&#xff0c;持续更新中… 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 最新发布 &#x1f449…

分布式session

目录 1.什么是session 2.session共享问题 2.1.session复制同步 2.2.存在客户端 2.3.一致性hash 2.4.统一存储 1.什么是session HTTP是无状态的&#xff0c;session是一种会话保持技术&#xff0c;目的就是以一种方式来记录http请求之间需要传递、交互的数据。 不是每次…