vue3 v-bind=“$attrs“ 的一些理解,透传 Attributes相关说明及事例说明

1、可能小伙伴们经常会在自己的项目中看到v-bind="$attrs",这个一般是在自定义组件中看到。

比如:

<template><BasicModalv-bind="$attrs"@register="registerModal":title="getTitle"@ok="handleSubmit":can-fullscreen="false"><BasicForm @register="registerForm" /></BasicModal>
</template>

又比如:

<template><BasicDrawerv-bind="$attrs"@register="register"showFooter:title="getTitle"width="50%"@ok="handleSubmit"><BasicForm @register="registerForm" /></BasicDrawer>
</template>

那么这个v-bind="$attrs"究竟是干嘛用的,为什么要写上这一段呢?

2、理解v-bind="$attrs"

Attributes 继承
  • “透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyle 和 id
  • 当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。举例来说,假如我们有一个 <MyButton> 组件,它的模板长这样:

禁用 Attributes 继承
  • 如果你不想要一个组件自动地继承 attribute,你可以在组件选项中设置 inheritAttrs: false
  • 最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false,你可以完全控制透传进来的 attribute 被如何使用。
  • 这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。
  • 这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute,例如 classstylev-on 监听器等等。

3、访问透传 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)}
}

官方地址:https://cn.vuejs.org/guide/components/attrs.html

4、案例

TransAttrsTest.vue代码:

<template><div><h1>TransAttrsTest</h1><hr/><TransAttrsTestA class="red" @click="showInfoRoot" style="cursor: pointer"/></div>
</template>
<script setup lang="ts">
import TransAttrsTestA from "./TransAttrsTestA.vue";
const showInfoRoot = () => {console.log("TransAttrsTest");
};
</script>
<style scoped>
.red {color: red;
}
</style>

TransAttrsTestA.vue代码:

<template><div><div class="bg" @click="showInfo">TransAttrsTestA</div><hr /><TransAttrsTestB class="bg" @click="showInfo" v-bind="$attrs"/><span>Fallthrough attribute: {{ $attrs }} <br/> {{ $attrs.style?.cursor }}</span></div>
</template>
<script setup lang="ts">
import { useAttrs } from "vue";
import TransAttrsTestB from "./TransAttrsTestB.vue";
const attrs = useAttrs();
// from vue3.3
defineOptions({inheritAttrs: false, //true:public false:private
});
const showInfo = () => {console.log("TransAttrsTestA");console.log("attrs", attrs.style?.cursor);// console.log("attrs", $attrs)
};
</script>
<style scoped>
.bg {background-color: #f2f2f2;
}
</style>

TransAttrsTestB.vue代码:

<template><div><div class="blue" @click="showInfo">TransAttrsTestB</div></div>
</template>
<script setup lang="ts">
const showInfo = () => {console.log("TransAttrsTestB");
};
</script>
<style scoped>
.blue {color: blue;
}
</style>

App.vue

5、总结说明:

  • vue3.3开始可以使用,在这之前默认false
defineOptions({inheritAttrs: false, //true:public false:private});
  • 详细说明

inheritAttrs: true:类似public  引用的组件上的class,style,@click都会在组件中起作用,可透传。

inheritAttrs: false:  类似private, 如果是false,引用的组件上的class,style,@click都会在组件中不会起作用。不可以透传。

但可以通过以下二种方式获取到:

1)template中$attrs中获取到。

<span>Fallthrough attribute: {{ $attrs }} <br/> {{ $attrs.style?.cursor }}</span>

2)script中我们使用useAttrs()来访问到

const attrs = useAttrs(); console.log("attrs", attrs.style?.cursor);

最后,通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实是否可以透传以及透传到哪里。

分别作用在1,与作用在2位置上的输出:

1的位置:

2的位置:

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

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

相关文章

Python进程间网络远程通讯方式:socket、pipe、RPC详解!

背景 最近在进行开发工作的时候&#xff0c;遇到了一个场景&#xff1a; pc程序需要和安卓设备进行通讯和接口调用。 此时就需要进行远程调用方法。然而大学时代有关于远程过程调用的知识都还给了老师……所以在此进行一个复习&#xff0c;并进行实战演练&#xff01; 网络…

UE驻网失败问题(三)

这个问题是lab问题&#xff0c;现象如下&#xff1a; 期望UE注册在SA网络下&#xff0c;咋一看没有5G MIB/SIB1打印&#xff0c;好像是没搜到5G小区&#xff0c;而实际上并不是这样。 在查看搜网过程时会发现如下log打印&#xff1a; [I nr5g_rrc_acq.c 3544] RRC ACQ: Band 41…

一个全面、先进、公平且模块化的开源RAG框架

两个关键问题限制了 RAG 的发展&#xff1a; 新型 RAG 算法之间缺乏全面和公平的比较。 像 LlamaIndex 和 LangChain 这样的开源工具使用了高级抽象&#xff0c;这导致了透明度的缺失&#xff0c;并限制了开****发新算法和评估指标的能力。 RAGLAB&#xff1a;是一个模块化的…

QML学习三:qml设计器报错 Line: 0: The Design Mode requires a valid Qt kit

开发环境:Qt 6.5.3 LTS 1、Qt 6.5.3 LTS 2、Pyside6 3、Python 3.11.4 4、win11 默认不打开设计器的时候可以看到我们默认是有Python的环境,而且点击运行是可以运行的。但是当打开qml设计器时提示下面这个错误,提示需要一个可用的套件。 解决办法: 点击+号创建新的套件…

OpenAI官宣ChatGPT用户破2亿,新模型比GPT-4强100倍!

在刚刚召开的“KDDI SUMMIT 2024”大会上&#xff0c;OpenAI日本首席执行官長崎忠雄表示&#xff0c;截止至今年8月底&#xff0c;ChatGPT的月活用户数量突破2亿大关&#xff0c;成为史上最快达到这一成就的软件产品。 同时&#xff0c;ChatGPT企业级用户也获得大幅度增长达到…

Windows自动化程序开发指南

自动化程序的概念 “自动化程序”指的是通过电脑编程来代替人类手工操作的一类程序或软件。这类程序具有智能性高、应用范围广的优点&#xff0c;但是自动化程序的开发难度大、所用技术杂。 本文对自动化程序开发的各个方面进行讲解。 常见的处理对象 自动化程序要处理的对…

STM32关于keil使用过程中遇到的问题

1.设备管理器STlink驱动确认安装完成&#xff0c;但是keil里一直识别不到&#xff0c;换下载器也没用 &#xff08;1&#xff09;问题描述 我的问题是这样产生的&#xff1a;之前用标准库开发STM32的时候&#xff0c;STLink能够正常使用&#xff0c;然后使用HAL库开发的时候出…

声音克隆工具CosyVoice

阿里的免费声音克隆工具CosyVoice CosyVoice 是阿里通义实验室在七月初开源的一款专注于自然语音合成的语音大模型&#xff0c;它具备多语言、多音色和细腻的情感控制能力。这个系统支持中文、英文、日文、粤语和韩语五种语言的语音生成&#xff0c;并且在语音合成的效果上远超…

WebShell流量特征检测_哥斯拉篇

90后用菜刀&#xff0c;95后用蚁剑&#xff0c;00后用冰蝎和哥斯拉&#xff0c;以phpshell连接为例&#xff0c;本文主要是对后三款经典的webshell管理工具进行流量分析和检测。 什么是一句话木马&#xff1f; 1、定义 顾名思义就是执行恶意指令的木马&#xff0c;通过技术手…

STM32G474之DAC

STM32G474分别使用CORDIC硬件和“math.h”的正弦值&#xff0c;从DAC1和DAC2输出。 1、DAC特点 PA4的附加功能为DAC1_OUT1&#xff0c;无需映射&#xff0c;直接将它配置为模拟功能&#xff0c;就可以使用了。 PA6的附加功能为DAC2_OUT1&#xff0c;无需映射&#xff0c;直接将…

物料主数据的分类及编码规则概述

物料主数据分布在设计、工艺、生产、采购、销售、存储、物流过程中的多个业务部门中&#xff0c;类型繁杂且不易于管理&#xff0c;必须对于物料主数据进行分类管理。 本文将从物料主数据的分类原则、编码样例、编码规范以及编码设计等方面进行详细介绍&#xff0c;帮助企业更…

STM32高级定时器生成互补PWM的原理与代码实现

文章目录 前言一 CubeMx配置1.1 TIM1 Mode and Configuration1.2 Paramter Settings 二 程序代码三 仿真分析总结 前言 互补 PWM&#xff08;Complementary PWM&#xff09;是指一对逻辑状态互为反相的 PWM&#xff08;脉冲宽度调制&#xff09;信号。这种信号配置常见于电机控…

数字人实战第三天——wav2lip部署教程

wav2lip数字人 一、wav2lip简介 Wav2Lip 是一种通过将音频与视频中的嘴唇动作同步的技术&#xff0c;旨在生成与音频内容高度匹配的口型动画。其主要应用是让视频中的人物嘴唇动作与配音或其他音频输入精确同步&#xff0c;这在电影配音、虚拟主持人、在线教学、影视后期处理等…

秋招最新大模型算法面试,熬夜都要肝完它

&#x1f4a5;大家在面试大模型LLM这个板块的时候&#xff0c;不知道面试完会不会复盘、总结&#xff0c;做笔记的习惯&#xff0c;这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助&#xff0c;都附有完整答案&#xff0c;熬夜…

CSS —— display属性

用于指定一个元素在页面中的显示方式 HTML中标签元素大体被分为三种类型&#xff1a;块元素、行内元素和行内块元素 块元素 &#xff1a;block 1.独占一行 2.水平方向&#xff0c;占满它父元素的可用空间&#xff08;宽度是父级的100%&#xff09; 3.垂直方向&#xff0c;占据的…

Idea 创建 Maven项目的时候卡死

文章目录 一、Archetype 和 Catalog1.1 Archetype&#xff08;原型&#xff09;1.2 Catalog&#xff08;目录&#xff09; 二、可能遇到的问题2.1 问题描述2.2 原因分析2.3 解决方案 参考资料 一、Archetype 和 Catalog 1.1 Archetype&#xff08;原型&#xff09; Archetype…

【自考zt】【软件工程】【21.10】

关键字&#xff1a; 软件需求基本性质、软件系统需求挑战、耦合&#xff08;高内容&#xff0c;低无直接&#xff09;、内聚&#xff08;初始化时间&#xff09;、uml包、rup边界类、测试首要目标、单元测试最后工作、性能需求 软件开发本质、软件需求规约三种风格、提炼、用…

9.7(QT.Day 1)

一、自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 要求&#xff1a;每行代码都有注释 【需要用到的图片或者动图&#xff0c;自己去网上找】 1.mywidget.h代码 #ifndef MYWIDGET_H #define MYWIDGET_H#include <QWidget> #include <QIcon> //图…

2024全国大学省数学建模竞赛A题-原创参考论文(部分+第一问代码)

一问题重述 1.1 问题背景 "板凳龙"&#xff0c;又称"盘龙"&#xff0c;是浙闽地区的传统地方民俗文化活动。这种独特的表演艺术形式融合了中国传统龙舞的精髓和地方特色&#xff0c;展现了人们对美好生活的向往和对传统文化的传承。 在板凳龙表演中&am…

为elementui的el-date-picker时间选择器添加快捷选项

1、效果图 2、实现方法 直接在elementui的时间选择器上修改&#xff0c;添加shorcuts选项&#xff0c;但是样式要自己修改。 有几个注意点&#xff1a; 1&#xff09;如图我是选中后有显示背景颜色的&#xff0c;也就意味着要给选中的选项添加类名&#xff0c;elementui没有…