vue3 透传 Attributes

news/2025/1/15 22:09:49/

前言

Vue 3 现在正式支持了多根节点的组件,也就是片段!

Vue 2.x 遵循单根节点组件的规则,即一个组件的模板必须有且仅有一个根元素。

为了满足单根节点的要求,开发者会将原本多根节点的内容包裹在一个<div>元素中:

<!-- Layout.vue -->
<template><div><h1>标题</h1><p>段落</p></div>
</template>

这是因为Vue 的编译器在解析组件模板时,是基于单根节点的树形结构进行处理的。如果存在多个根节点,编译器无法明确地构建组件的虚拟 DOM 结构。

因此,在Vue 2.x中,父组件在使用子组件时,写在子组件上的 classstyleid 等属性会直接传递到子组件的根元素上。

Vue 3.x 打破了 Vue 2.x 中组件模板必须有且仅有一个根元素的限制,现在组件可以包含多个根节点。

<template><h1>标题</h1><p>段落</p>
</template>

当组件存在多个根节点时,在父组件中给该组件传递属性(attribute)就需要明确指定这些属性应该绑定到哪个根节点上。如果不进行显式指定,Vue 无法确定属性的归属。

<template><ChildComponent><template v-slot:default="{ attrs }"><div v-bind="attrs">这是一个 div 根节点</div><p>这是一个 p 根节点</p><span>这是一个 span 根节点</span></template></ChildComponent>
</template>

在示例中,通过v-slot:default="{attrs}"获取到ChildComponent.vue通过插槽传递给父组件的所有属性(存储在attrs中),然后使用v-bind="attrs"将这些属性显式地绑定到其中一个根节点<div>上。

Attributes 继承

“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 propsemits 的 attribute 或者 v-on 事件监听器。

当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。

最常见的例子就是 classstyleid

子组件ChildComponent.vue的模板内容如下:

<div>这是子组件的div</div>

在父组件使用子组件ChildComponent.vue,并且传入了 classstyleid

<template><div><h1>父组件</h1><ChildComponent class="child-div"  id="child-div"style="font-size: 20px; color: brown;" /></div>
</template>
<script setup lang="ts">javascript">
import ChildComponent from './ChildComponent.vue';
</script>

渲染出的DOM结果是:

<div class="child-div" id="child-div" style="font-size: 20px; color: brown">这是子组件的div
</div>

<ChildComponent> 并没有将 classstyleid声明为它所接受的 prop,所以 classstyleid被视作透传 attribute,自动透传到了 <ChildComponent> 的根元素上。

style 属性透传到子组件的根元素后,它的生效方式与直接在 HTML 元素上设置 style 属性是一样的:
在这里插入图片描述

自动合并 classstyle

如果一个子组件的根元素已经有了 classstyle attribute,它会和从父组件上继承的值合并。

给子组件ChildComponent.vue加上classstyleid属性:

<divclass="child-box"id="child-box"style="padding: 15px; background-color: #f8f8f8"
>这是子组件的div
</div>

渲染出的DOM结果是:

<divclass="child-box child-div"id="child-div"style="padding: 15px;background-color: rgb(248, 248, 248);font-size: 20px;color: brown;"
>这是子组件的div
</div>

子组件的classstyle 属性值 和 从父组件上继承的值合并,子组件的 id 属性值被从父组件继承的 id 属性值覆盖。

页面渲染结果如下图:
在这里插入图片描述

v-on 监听器继承

子组件ChildComponent.vue的模板内容如下:

<div @click="console.log('子组件的点击事件被触发了')"> 这是子组件的div </div>

在父组件中,给<ChildComponent>绑定一个点击事件:

<template><div class="home-wrap"><h1>父组件</h1><ChildComponent @click="console.log('在父组件中,给子组件绑定的点击事件被触发了!')"/></div>
</template>
<script setup lang="ts">javascript">
import ChildComponent from './ChildComponent.vue';
</script>

父组件中绑定的click 监听器会被添加到 <ChildComponent> 的根元素:子组件的 <div> 元素之上。
子组件的<div>元素自身也通过 v-on 绑定了一个事件监听器。

当点击子组件的<div>元素,子组件的click监听器和从父组件继承的监听器都会被触发:
在这里插入图片描述

深层组件继承

有些情况下一个组件会在根节点上渲染另一个组件。

ChildComponent.vue的根节点渲染的是另一个组件GrandChild.vue时:

<!-- ChildComponent.vue 的模板,只是渲染另一个组件:<GrandChild /> -->
<template><GrandChild />
</template>

此时 <ChildComponent> 接收的透传 attribute 会直接继续传给 <GrandChild>

注意:

  1. 透传的 attribute 不会包含 <ChildComponent> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数,换句话说,声明过的 props 和侦听函数被 <ChildComponent> “消费”了。

  2. 透传的 attribute 若符合声明,也可以作为 props 传入 <GrandChild>

禁用 Attributes 继承

在选项式API中,在组件选项中设置 inheritAttrs: false 可以禁止 组件自动地继承 attribute。

在组合式API中,在 <script setup> 中使用 defineOptions

<script setup>javascript">
defineOptions({inheritAttrs: false
})
// ...setup 逻辑
</script>

通过设置 inheritAttrs 选项为 false,可以完全控制透传进来的 attribute 被如何使用。

注意:透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到

ChildComponent.vue中,设置 inheritAttrs: false 并通过$attrs访问透传属性 customValue

<!-- ChildComponent.vue 的模板 -->
<template><div>在ChildComponent.vue中,读取透传 Attributes: {{ $attrs.customValue }}</div>
</template>
<script setup lang="ts">javascript">
defineOptions({inheritAttrs: false
})
</script>

在父组件中,使用子组件ChildComponent.vue,传递class属性、customValue属性:

<template><div class="home-wrap"><h1>父组件</h1><ChildComponent class="child-div" :customValue="customValue" /></div>
</template>
<script setup lang="ts">javascript">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const customValue = ref(10)
</script>

渲染出的DOM结果是:

<div>在ChildComponent.vue中,读取透传 Attributes: 10</div>

可以看到,父组件传的class属性并没有被直接透传到子组件的根元素上。

通过Vue Devtools查看$attrs$attrs 包含了 透传进来的 classcustomValue属性:
在这里插入图片描述
$attrs 对象包含了除组件所声明的 propsemits 之外的所有其他 attribute,例如 classstylev-on 监听器等等。

  • props 有所不同,透传 attributes 在 JavaScript 中保留了它们原始的大小写,所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。

  • @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick

通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现将 透传 attribute 应用在合适的元素上:

<!-- ChildComponent.vue 的模板 -->
<template><div><div v-bind:="$attrs">在ChildComponent.vue中,读取透传 Attributes: {{ $attrs.customValue }}</div></div>
</template>
<script setup lang="ts">javascript">
defineOptions({inheritAttrs: false
})
</script>

渲染出的DOM结果是:

<div><div class="child-div" customvalue="10">在ChildComponent.vue中,读取透传 Attributes: 10</div>
</div>

通过不带参数的 v-bind,将一个对象的所有属性都作为 attribute 应用到目标元素上。

多根节点的 Attributes 继承

和单根节点组件有所不同,有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定,将会抛出一个运行时警告。

修改ChildComponent.vue

<!-- ChildComponent.vue 的模板 -->
<template><h2>ChildComponent的标题</h2><div>ChildComponent的内容</div>
</template>

此时,ChildComponent.vue是多根节点模板,由于 Vue 不知道要将 attribute 透传到哪里,所以会抛出一个警告:

Extraneous non-props attributes (class, customValue) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

ChildComponent.vue有多个根节点时,需要显式绑定 $attrs

<!-- ChildComponent.vue 的模板 -->
<template><h2 v-bind="$attrs">ChildComponent的标题</h2><div>ChildComponent的内容</div>
</template>

在 JavaScript 中访问透传 Attributes

在选项式API中,attrs 会作为 setup() 上下文对象的一个属性暴露:

<script>javascript">
export default {setup(props, ctx) {// 透传 attribute 被暴露为 ctx.attrs,且 没有响应性console.log(ctx.attrs)}
}
</script>

在组合式API中,在 <script setup> 中使用 useAttrs() API 来访问一个组件的所有透传 attribute:

<script setup>javascript">
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

有个疑问待解决:

官网说法:attrs 对象总是反映为最新的透传 attribute,但它没有响应性,不能通过侦听器去监听它的变化。

我直接在模板中使用$attrs,以及使用上述2种方式获取attrs,修改透传 attribute 后,页面也更新了。
所以没get到,官方说的attrs对象没有响应性是指哪方面。
知道为什么的童鞋可以在评论区讲一下或者是私信给我说一下,非常感谢!


http://www.ppmy.cn/news/1526668.html

相关文章

Parallels Desktop 20破解版(Mac虚拟机) v20.0.0 for Mac 最新商业版(支持M系列)

Parallels Desktop 20是一款目前功能最强大灵活度最高的虚拟机软件&#xff0c;可运行数千种 Windows 应用程序&#xff0c;如 Microsoft Office、Internet Explorer、Access、Quicken、QuickBooks、Visual Studio&#xff0c;甚至支持对图像要求较高的游戏和 CAD 项目&#xf…

宠物定位技术升级,蓝牙定位让爱宠随时在线

担心爱宠在外玩耍时走失?通过蓝牙定位技术&#xff0c;我们为您的爱宠提供精准、实时的追踪服务。无论是在家中、户外&#xff0c;还是在人流密集的场所&#xff0c;蓝牙定位都能确保您随时掌握爱宠的动向。 一、蓝牙技术的基本原理&#xff1a; 蓝牙技术是一种短距离无线通…

面向对象设计的五大原则(SOLID 原则)

面向对象设计的五大原则&#xff08;SOLID 原则&#xff09;是指导我们设计可维护、灵活且易扩展的面向对象系统的核心准则。这些原则帮助开发者避免常见的设计陷阱&#xff0c;使代码更具可读性和可维护性。 0.设计原则和设计模式的关系 设计原则&#xff08;Design Princip…

Qt常用控件——QSpinBox

文章目录 QSpinBox核心属性及信号点餐示例 QSpinBox核心属性及信号 QSpinBox或者QDoubleSpinBox表示微调框&#xff0c;带有按钮的输入框&#xff0c;可以用来输入整数/浮点数或者通过点击按钮调整数值大小 QSpinBox和QDoubleSpinBox用法基本相同&#xff0c;本篇以QSpinBox为…

PHP智慧家政同城服务家政系统小程序源码

智慧家政&#xff0c;同城服务新篇章 —— 探索家政系统的无限可能 开篇&#xff1a;走进智慧家政时代 在这个快节奏的生活中&#xff0c;每一分每一秒都显得尤为珍贵。当忙碌成为常态&#xff0c;如何让家成为真正的避风港&#xff1f;答案或许就藏在“智慧家政同城服务家政…

Spring Boot-自动配置问题

**### Spring Boot自动配置问题探讨 Spring Boot 是当前 Java 后端开发中非常流行的框架&#xff0c;其核心特性之一便是“自动配置”&#xff08;Auto-Configuration&#xff09;。自动配置大大简化了应用开发过程&#xff0c;开发者不需要编写大量的 XML 配置或是繁琐的 Jav…

illustrator插件大全 免费插件介绍 Ai设计插件集合 (2)

12、Ai Toolbox 图层名称选择插件 支持AI CC2018-2022-2024 Ai Toolbox for Illustrator — Conical Labels, Bulk Rename and moreAi Toolbox is a plugin for Adobe Illustrator that makes conical labels, provides bulk artboards and paths renaming, selecting by name…

用Python爬虫制作一个简易翻译器

我们通常是通过requestsBS4的方法来获取网页内容&#xff0c;这种方法导入模块较多&#xff0c;速度相对有点儿慢&#xff0c;此时我们可以用requests的post方法向指定服务器发送请求&#xff0c;获取数据后格式化为json&#xff0c;然后获取相关键值。这种方法用到了requests和…