Vue3中的透传Attributes / $attrs:简化组件开发的利器

news2024/12/22 15:10:33

前言

Vue3推出了一系列新功能和改进。使用下来后,其中一个很实用的新特性就是透传 Attributes(透传属性)。本文将介绍 Vue3中的透传 Attributes,并提结合代码示例来展示它在实际项目中的使用。

一、什么是透传 Attributes?

在 Vue 中,父组件可以通过属性(Props)向子组件传递数据,以控制子组件的行为和外观。然而,在某些情况下,我们希望将父组件的属性直接传递给子组件内部的 HTML 标签或自定义组件

以前,我们需要手动将这些属性逐层传递下去,但现在 Vue 3 引入了透传 Attributes 来简化这个过程。

透传 Attributes 允许在组件中自动将父组件的未声明 Props 直接传递给子组件的根元素或另一个指定元素。这意味着你可以更方便地在子组件中访问到父组件的属性,而无需手动一层层传递。

Vue3中文官网解释

二、如何使用透传 Attributes?

1. 具体使用

  • 父组件:直接传属性
<template>
  <div>
    <ChildComponent name="John Doe" age="25" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
  • 子组件:使用 $attrs 或 useAttrs() 接收属性
<template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ $attrs.age }}</p>
    <!-- 在模板的表达式中直接用 $attrs 访问到 -->
    <p>{{ attrs.age }}</p>
  </div>
</template>

<script setup>
  // 在js里 使用 useAttrs() API 来访问到
  import { useAttrs } from 'vue'

  defineProps({
    name: String
  })

  const attrs = useAttrs()
  console.log(attrs)
</script>

打印:

在上述示例中,我们有一个父组件,在模板中引入了一个子组件 <ChildComponent>。父组件给子组件传递了两个属性:nameage

在子组件中,我们使用了 props 对象来声明 name 属性,而没有声明 age 属性。这时,age 属性就会被视为透传 Attributes,打印的内容中和渲染的p标签里,包含了父组件传递的未声明 Props age 的值。

通过透传 Attributes,我们可以轻松地在子组件中访问到父组件的属性,而不需要手动声明和传递。

2. 注意事项

当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定,或者没有被使用,将会抛出一个运行时警告。

把上面的子组件改一下,多一个div根节点:

<template>
  <div>
    <h2>{{ name }}</h2>
  </div>
  // 多了一个根元素
  <div></div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

此时报错表示:vueVue 不知道要将 attribute 透传到哪里。

解决办法:如果 $attrs 被显式绑定 或者 使用,或者 两者同时出现,则不会有警告。

<template>
  <!-- 显示绑定 -->
  <div v-bind="$attrs">
    <h2>{{ name }}</h2>
  </div>
  <div>
    <!-- 使用 -->
    <p>{{ $attrs.age }}</p>
  </div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

可能这里会有人疑惑,既然显示绑定了上面的div,下面的div依旧可以通过 $attrs 使用属性,那显示绑定的作用是什么?不是多此一举了吗?

其实不然。让我们把父组件改一下,添加一个id属性,子组件不做更改:

<template>
  <div>
    <ChildComponent id="custom-layout" name="John Doe" :age="25" />
  </div>
</template>

<script setup>
  import ChildComponent from './ChildComponent.vue'
</script>

这时就可以看到,父组件传递下来的id属性,自动添加到了使用 v-bind 显示绑定的元素上了。

三、透传 Attributes 的实际应用

1. 外部库集成

当我们在使用外部库或第三方组件时,可能需要将一些属性传递给这些组件以进行配置或自定义。透传 Attributes 可以很方便地将父组件的属性直接传递给外部库或第三方组件。

<template>
  <div>
    <ThirdPartyComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import ThirdPartyComponent from 'third-party-library';
</script>

在上述示例中,我们通过 $attrs 函数来获取父组件的所有未声明 Props,并将其直接传递给一个名为 ThirdPartyComponent 的第三方组件。

2. 高阶组件

透传 Attributes 还可以用于高阶组件(Higher-Order Components)的开发。高阶组件是一个接收一些额外属性,并将这些属性传递给内部子组件的组件。

<template>
  <div>
    <WrappedComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import WrappedComponent from './WrappedComponent.vue';
</script>

在上述示例中,我们创建了一个高阶组件,并通过 attrs 函数来获取父组件的所有未声明 Props,并将其直接传递给子组件 WrappedComponent

3. 动态组件

使用动态组件时,透传 Attributes 可以让父组件的属性传递到被动态渲染的组件中。

<template>
  <div>
    <component :is="dynamicComponent" v-bind="$attrs" />
  </div>
</template>

<script setup>
const dynamicComponent = 'ChildComponent';
</script>

在上述示例中,我们使用了动态组件来根据条件渲染不同的组件。通过 :isv-bind,我们可以将父组件的所有未声明 Props 透传给被动态渲染的组件。

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

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

相关文章

多网点多设备的动环机房都怎样集中管理的呢?

多机房动力环境集中监控系统针对分布不同区域、设备数量较多、减少人工巡检费用支出而设计的在线集中监控的系统平台。可用于分布式的UPS电源、精密空调、空气质量检测传感器、精密配电等设备的网络集中监控&#xff0c;通过TCP/IP网络&#xff0c;可以实时的跨地域的监控多台都…

四、DML-2.数据操作-修改

原数据表&#xff1a; 一、案例一 修改id为1的数据&#xff0c;将name修改为itheima update employee set name itheima where id 1; 步骤一&#xff1a;输入update命令并执行&#xff1a; 步骤二&#xff1a;刷新查看employee表修改后数据&#xff1a; 二、案例二 修改id为…

Beyond Compare 代码比较工具

一、下载 官网下载地址&#xff1a; https://www.scootersoftware.com/download.php 选择 Windows 系统&#xff0c;简体中文版本&#xff0c;点击下载。 下载完成 二、安装 步骤1&#xff1a;双击安装包 步骤2&#xff1a;进入安装向导&#xff0c;点击下一步 步骤3&a…

【Git合并代码操作】B=>A

【Git合并代码操作步骤】B>A 前提&#xff1a;之前写了Git合并代码A>B&#xff0c;今天把B>A再写一下&#xff0c;顺风车》》》》》》》》 【git合并代码操作步骤】A&#xff1e;B_痴心阿文的博客-CSDN博客 拉B最新代码 > 然后git merge A &#xff0c;有冲突解决冲…

在SPringBoot生成验证码

1.引入依赖,这个依赖中包含了生成验证码的工具类 <!--引入hutool --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.9</version></dependency> 2.编写配置类 import cn.hu…

【软件测试】如何设计自动化测试脚本

企业中如何设计自动化测试脚本呢&#xff1f;今天我们就来为大家分享一些干货。 一、线性设计 线性脚本设计方式是以脚本的方式体现测试用例&#xff0c;是一种非结构化的编码方式&#xff0c;多数采用录制回放的方式&#xff0c;测试工程师通过录制回访的访问对被测系统进行…

为何零信任架构身份管理平台更可靠?

随着信息技术的不断进步&#xff0c;云计算、物联网以及移动设备的普及&#xff0c;信息泄露等安全问题愈发频繁。近期&#xff0c;一起某高校学生的信息泄露事件引发了大家的广泛讨论。该校学生利用其身份便利&#xff0c;非法获取了大量学生的姓名、学号、照片等隐私信息。 …

租赁小程序开发|租赁小程序定制|租赁系统源码定制功能

租赁小程序适合的产品开发范围广泛&#xff0c;可以涵盖各个行业和领域。下面将介绍租赁小程序适合的产品开发&#xff0c;并探讨其优势和应用场景。   一、租赁小程序适合的产品开发   物品租赁&#xff1a;租赁小程序可以用于各种物品的租赁&#xff0c;比如自行车、电动…

Redis基础 进阶项目实战总结笔记

文章目录 一、启动的三种方式1.默认启动2.指定配置启动3.开机自启动 二、数据类型1.string&#xff1a;字符串2. hash&#xff1a;哈希3. list&#xff1a;列表4. set&#xff1a;集合5. sorted set&#xff1a;有序集合 三、黑马课程的进阶项目实战总结博文笔记Redis实现短信登…

【个人笔记】linux的cd命令与目录结构理解

cd命令 cd&#xff08;英文全拼&#xff1a;change directory&#xff09;命令用于改变当前工作目录的命令&#xff0c;切换到指定的路径。 若目录名称省略&#xff0c;则变换至使用者的 home 目录 (也就是刚 login 时所在的目录)。 另外&#xff0c;~ 也表示为 home 目录 的…

uniapp 小程序 图片上传 实时拍照(仅拍照)限制上传5张 可预览 可删除

效果图&#xff1a; common.js /*** 预览图片*/ const previewImage (current,list)>{// 预览图片uni.previewImage({current: current,urls: list}); } /*** 删除图片*/ const removeImage (current,list)>{var photoFilesList list;photoFilesList.splice(curren…

【IM群发苹果日历】获取推送通知的设备标识符(Device Token)

苹果日历群发部署设置推送服务器推送服务器&#xff0c;用于向苹果日历应用的设备发送推送通知。推送服务器需要能够与Apple Push Notification Service (APNs) 进行通信。怎样来做&#xff1f; 部署设置推送服务器并与APNs进行通信需要以下步骤&#xff1a; 获取APNs证书&am…

高薪Offer收割机之redis集群

单节点的redis并发能力是有限的&#xff0c;如果需要进一步提高redis的并发能力&#xff0c;就需要搭建集群。 Redis中的集群分为三种&#xff1a; 主从复制&#xff0c;哨兵模式&#xff0c;分片集群 先来看一下主从复制&#xff1a; 在主从集群中一个主节点可以有多个从节…

Qt应用开发——QLabel的使用

目录 一、构造函数 二、属性和方法 三、实例一 显示内容和设置样式 四、实例二 使用html处理超链接 五、实例三 显示图像 六、实例四 显示GIF 七、实例五 伙伴机制 QLabel继承于QFrame&#xff0c;作为Qt Wdiget最基础也是最常用的控件&#xff0c;在实际开发中&#xf…

【C++】STL优先级队列(priority_queue)功能介绍以及模拟实现

优先级队列 前言正式开始priority_queue 基本介绍优先级队列的适配器第三个模板参数compare模拟实现priority_queue仿函数 前言 点进来的小伙伴不知道学过数据结构里的堆没有&#xff0c;如果学过的话&#xff0c;那就好说了&#xff0c;优先级队列就是堆&#xff0c;如果没学…

ViewModel实例什么时候被回收

作者&#xff1a;TechMix 一、ViewModel存在的意义&#xff1f; ViewModel做为JetPack中重要的组件&#xff0c;翻译成中文就是“视图模型”&#xff0c;根据分离关注点原则&#xff0c;ViewModel的出现&#xff0c;主要是为了分担Activity中的职责&#xff0c;专门用于存放和…

谷歌云 | Document AI 引入了强大的新自定义文档拆分器来自动化文档处理

【本文由Cloud Ace整理发布。Cloud Ace是谷歌云全球战略合作伙伴&#xff0c;拥有 300 多名工程师&#xff0c;也是谷歌最高级别合作伙伴&#xff0c;多次获得 Google Cloud 合作伙伴奖。作为谷歌托管服务商&#xff0c;我们提供谷歌云、谷歌地图、谷歌办公套件、谷歌云认证培训…

Orange:一个基于 Python 的数据挖掘可视化平台

本篇介绍一个适合初学者入门的机器学习工具。 Orange 简介 Orange 是一个开源的数据挖掘和机器学习软件。Orange 基于 Python 和 C/C 开发&#xff0c;提供了一系列的数据探索、可视化、预处理以及建模组件。 Orange 拥有漂亮直观的交互式用户界面&#xff0c;非常适合新手进…

测试用例(3)

功能测试用例方法&#xff1a; 等价类 边界值 因果图 正交实验分解法 判定表驱动分析方法 非功能性的测试用例方法&#xff1a; 错误推测法 功能图分析方法 场景&#xff1a; 场景设计方法 1) 在任何情况下都必须使⽤边界值分析⽅法&#xff0c;经验表明⽤这种⽅法设…

CGT Asia嘉年华|3D细胞培养与类器官研发峰会10月广州召开

类器官指利用成体干细胞或多能干细胞进行体外三维&#xff08;3D&#xff09;培养而形成的具有一定空间结构的组织类似物&#xff0c;是近10年来干细胞领域发展最快的研究热点之一。2022年&#xff0c;FDA 通过现代化法案 2.0&#xff0c;批准全球首个完全基于“类器官芯片”研…