14 vue学习:透传Attributes

Attributes 继承

在这里插入图片描述

“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 [props]或 [emits]的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyleid

当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。举例来说,假如我们有一个 <MyButton> 组件,它的模板长这样:

<!-- <MyButton> 的模板 -->
<button>Click Me</button>

一个父组件使用了这个组件,并且传入了 class

<MyButton class="large" />

最后渲染出的 DOM 结果是:

<button class="large">Click Me</button>

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

classstyle 的合并

如果一个子组件的根元素已经有了 classstyle attribute,它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样:

<!-- <MyButton> 的模板 -->
<button class="btn">Click Me</button>

则最后渲染出的 DOM 结果会变成:

<button class="btn large">Click Me</button>

v-on 监听器继承

同样的规则也适用于 v-on 事件监听器:

<MyButton @click="onClick" />

click 监听器会被添加到 <MyButton> 的根元素,即那个原生的 <button> 元素之上。当原生的 <button> 被点击,会触发父组件的 onClick 方法。同样的,如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器,则这个监听器和从父组件继承的监听器都会被触发。

深层组件继承

有些情况下一个组件会在根节点上渲染另一个组件。例如,我们重构一下 <MyButton>,让它在根节点上渲染 <BaseButton>

<!-- <MyButton/> 的模板,只是渲染另一个组件 -->
<BaseButton />

此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>

请注意:

  1. 透传的 attribute 不会包含 <MyButton> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数,换句话说,声明过的 props 和侦听函数被 <MyButton>“消费”了。
  2. 透传的 attribute 若符合声明,也可以作为 props 传入 <BaseButton>

禁用 Attributes 继承

在这里插入图片描述

如果你不想要一个组件自动地继承 attribute,你可以在组件选项中设置 inheritAttrs: false

从 3.3 开始你也可以直接在 <script setup> 中使用 [defineOptions]:

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

最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false,你可以完全控制透传进来的 attribute 被如何使用。

这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。

<span>Fallthrough attribute: {{ $attrs }}</span>

这个 $attrs 对象包含了除组件所声明的 propsemits 之外的所有其他 attribute,例如 classstylev-on 监听器等等。

有几点需要注意:

  • 和 props 有所不同,透传 attributes 在 JavaScript 中保留了它们原始的大小写,所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。
  • @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick

现在我们要再次使用一下[之前小节]中的 <MyButton> 组件例子。有时候我们可能为了样式,需要在 <button> 元素外包装一层 <div>

<div class="btn-wrapper"><button class="btn">Click Me</button>
</div>

我们想要所有像 classv-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。我们可以通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现:

<div class="btn-wrapper"><button class="btn" v-bind="$attrs">Click Me</button>
</div>

小提示:[没有参数的 v-bind]会将一个对象的所有属性都作为 attribute 应用到目标元素上。

多根节点的 Attributes 继承

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

<CustomLayout id="custom-layout" @click="changeValue" />

如果 <CustomLayout> 有下面这样的多根节点模板,由于 Vue 不知道要将 attribute 透传到哪里,所以会抛出一个警告。

<header>...</header>
<main >...</main>
<footer>...</footer>

如果 $attrs 被显式绑定,则不会有警告:

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

在 JavaScript 中访问透传 Attributes

在这里插入图片描述

如果需要,你可以在 <script setup> 中使用 useAttrs() API 来访问一个组件的所有透传 attribute:

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

如果没有使用 <script setup>attrs 会作为 setup() 上下文对象的一个属性暴露:

export default {setup(props, ctx) {// 透传 attribute 被暴露为 ctx.attrsconsole.log(ctx.attrs)}
}

需要注意的是,虽然这里的 attrs 对象总是反映为最新的透传 attribute,但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性,可以使用 prop。或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

在这里插入图片描述

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

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

相关文章

【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit(2)

1.问题描述&#xff1a; 怎么判断登录的华为帐号有变动&#xff1f; 解决方案&#xff1a; 华为帐号登录成功后会返回唯一标识OpenID和UnionID&#xff0c;如果切换不同的华为帐号登录&#xff0c;这个唯一标识会变。 OpenID是华为帐号用户在不同类型的产品的身份ID&#x…

JWT Authorization header using the Bearer scheme

文章目录 引言I Json web token (JWT)1.1 JWT1.2 authentication_schemes(token authentication)1.3 SecurityScheme的实现II Swagger添加bearer token参数2.1 Swagger效果2.2 .net core Swagger实现Bearer Authentication2.3 java OpenAPI 3.0实现Bearer Authentication2.4 …

【全部更新完毕】2024长三角数学建模A题思路代码文章教学-“抢救”落水手机

文章摘要部分&#xff1a; “抢救”落水手机 摘要 文章主要探讨了如何科学地处理和搜索在水体中意外掉落的物品&#xff1a;华为 Mate 60 Pro手机和居民身份证。本文基于物理模型和动力学分析&#xff0c;为不同水体环境中的掉落物品提供了详尽的搜索策略和打捞建议。 本文…

[安洵杯 2019]crackMe

直接就退出程序了 找到关键函数了&#xff0c;好像用到了 hook 还有一个 嘿嘿&#xff0c;看着就是像 base64 只是 补‘’改成了‘ &#xff01; ’ 交叉引用啊&#xff0c;翻到一个应该是最后比较函数 1UTAOIkpyOSWGv/mOYFY4R!! 那一坨对 a1数组的操作没看懂 先总结一下就是…

SpringBoot搭建Eureka注册中心

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 1、Spring-Cloud Euraka介绍 Spring-Cloud Euraka是Spring Cloud集合中一…

vue3 + vite 实用依赖与配置

mark一下日常 vue3 vite 项目配置 实用依赖与配置 1. amfe-flexible&#xff08;2&#xff09;安装&#xff08;3&#xff09;使用 2. postcss-pxtorem&#xff08;1&#xff09;介绍&#xff08;2&#xff09;安装&#xff08;3&#xff09;使用 3. autoprefixer&#xff08;…

Convolutional Occupancy Networks【ECCV2020】

论文&#xff1a;https://arxiv.org/pdf/2003.04618 代码&#xff1a;GitHub - autonomousvision/convolutional_occupancy_networks: [ECCV20] Convolutional Occupancy Networks 图 1&#xff1a;卷积占据网络。传统的隐式模型 (a) 由于其全连接网络结构&#xff0c;表现能力…

继承初级入门复习

注意&#xff1a;保护和私有在类中没有区别&#xff0c;但是在继承中有区别&#xff0c;private在继承的子类不可见&#xff0c;protect在继承的子类可见 记忆方法&#xff1a;先看基类的修饰符是private&#xff0c;那都是不可见的。如果不是&#xff0c;那就用继承的修饰和基…

对this对象的理解

This 是指函数被调用是的上下文&#xff0c;它指向最后一次调用这个方法的对象。this的值并不是在函数定义时确定的&#xff0c;而是在函数被调用时确定的。在实际开发中&#xff0c;this 的指向一般可以通过四种调用模式来判断。 1、函数调用 当一个函数不是一个对象的属性时…

使用keepalived实现mysql主从复制的自动切换

使用Keepalived实现MySQL主从复制的自动切换通常涉及配置一个虚拟IP&#xff08;VIP&#xff09;作为MySQL服务器对客户端的访问点。Keepalived会监控MySQL主服务器的健康状况&#xff0c;如果主服务器宕机&#xff0c;Keepalived会自动将虚拟IP移至备用服务器&#xff0c;从而…

鸿蒙实战开发:网络层的艺术——优雅封装与搭建指南(上)

在鸿蒙的广袤开发世界中,网络层作为信息交换的桥梁,其重要性不言而喻。今天,我将带领大家一同探索如何以艺术般的手法,优雅地封装鸿蒙官方的网络库,为我们的应用搭建一个高效、灵活的网络层。我们在下一篇章中,将深入阐述如何利用这一封装完善的网络库,轻松驾驭网络层的…

gstreamer Windows常见问题汇总

需要先安装gstreamer , 再编译opencv。https://gstreamer.freedesktop.org/download/&#xff0c;都需要安装。 OpenCV Error: Unspecified error (The function is not implemented. Rebuild the library with Windows, GTK 2.x or Carbon support. If you are on Ubuntu or D…

肌肤暗沉与胶原蛋白:解锁透亮肌肤的秘密

&#x1f338;亲爱的小仙女们&#xff0c;今天我们来聊聊肌肤暗沉与胶原蛋白之间的神秘联系。你是不是也曾为肌肤的暗沉而烦恼&#xff1f;其实&#xff0c;很多时候&#xff0c;肌肤的暗沉不仅仅是外部因素造成的&#xff0c;更与肌肤内部的胶原蛋白含量密切相关。&#x1f31…

C++ 变量类型与转换

C 变量类型与转换 文章目录 C 变量类型与转换变量int_tsize_t与ssize_tpid_ttime_t typenametypeid关键字类型转换编译期类型转换std::static_cast注意事项运行时类型转换std::dynamic_cast 变量 int_t 它是通过typedef定义的&#xff0c;而不是一种新的数据类型。 - int8_t…

SpringBoot之@Builder 注解

&#xff08;1&#xff09;Builder 生成的构造器不是完美的&#xff0c;如果没有提供必须的参数&#xff0c;构造器可能会创建出不完整或者不合法的对象&#xff0c;导致代码报错。 Builder 注解产生的 Builder 类的构造方法默认并不能限定必传参数。 &#xff08;2&#xff…

系统架构师-考试-基础题-错题集锦1

系统架构师-考试-基础题-错题集锦 1.当一台服务器出现故障时将业务迁移到另外一台物理服务器上&#xff0c;保障了业务的连续性。 2.面向对象&#xff1a; 实体类&#xff0c;边界类&#xff0c;控制类 3.RUP&#xff1a;UP&#xff0c;统一过程&#xff0c;以架构为中心&am…

LeetCode700二叉搜索树中的搜索

题目描述 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 解析 最基本的二叉搜索树的应用&#xff0c;递归或者while循环都可以…

分布式数据库HBase入门指南

目录 概述 HBase 的主要特点包括: HBase 的典型应用场景包括: 访问接口 1. Java API: 2. REST API: 3. Thrift API: 4. 其他访问接口: HBase 数据模型 概述 该模型具有以下特点&#xff1a; 1. 面向列: 2. 多维: 3. 稀疏: 数据存储: 数据访问: HBase 的数据模型…

炼丹学习笔记2---ubuntu2004运行3D Gaussian Splatting记录

前言 主要想看看前沿效果&#xff0c;看看跟激光slam出来效果差多少。折腾过程中&#xff0c;务必 根据本地的cuda版本号&#xff0c;安装对应的torch相关东西。 1、拉仓库 git clone https://github.com/graphdeco-inria/gaussian-splatting.git2、创建环境并激活 conda c…

MySQL详细安装、配置过程,多图,详解

本文适合centos7环境下安装mysql&#xff0c;在安装和卸载过程中&#xff0c;都在root用户下完成。文章目录 清理环境获取mysql官方yum源安装mysql yum源安装mysql服务安装报错解决办法验证是否安装完成启动mysql服务登录服务方法一&#xff1a;方法二&#xff1a;方法三&#…