vue 透传 Attributes(二)

禁用 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 对象包含了除组件所声明的 props 和 emits 之外的所有其他 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>

多根节点的 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)}
}

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

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

相关文章

2024年京东云主机租用价格_京东云服务器优惠价格表

2024年京东云服务器优惠价格表&#xff0c;轻量云主机优惠价格5.8元1个月、轻量云主机2C2G3M价格50元一年、196元三年&#xff0c;2C4G5M轻量云主机165元一年&#xff0c;4核8G5M云主机880元一年&#xff0c;游戏联机服务器4C16G配置26元1个月、4C32G价格65元1个月、8核32G费用…

新书速递——《可解释AI实战(PyTorch版)》

本书旨在帮助你实施最新的可解释AI技术&#xff0c;以构建公平且可解释的AI系统。可解释AI是当今AI研究中的热门话题&#xff0c;但只有少数资源和指南涵盖了所有重要技术&#xff0c;这些技术对实践者来说非常有价值。本书旨在填补这一空白。 本书读者对象 本书既适合那些有兴…

当代深度学习模型介绍--长短期记忆网络(LSTMs)

AI大模型学习 方向一&#xff1a;AI大模型学习的理论基础 模型和应用的多样化&#xff1a;随着研究的深入&#xff0c;深度学习领域出现了多种创新的模型架构&#xff1a; 卷积神经网络&#xff08;CNNs&#xff09;专门针对图像处理任务进行了优化&#xff0c;通过模拟生物视…

实验4(数据结构课程实验)

题目&#xff1a; 设计一个算法&#xff0c;将不带头节点的单链表所有结点的连接方向“原地”逆转&#xff0c;即要求利用原表的存储空间。 代码&#xff1a; /* 实验4 设计一个算法&#xff0c;将不带头节点的单链表所有结点的连接方向“原地”逆转&#xff0c; 即要求利用…

GIt的原理和使用(五):模拟多人协作的两种情况

目录 多人协作 多人协作一 准备工作 协作开发 多人协作二 准备工作 额外场景 申请单合并分支 更推荐写法 远程分支删除后&#xff0c;本地git branch -a依然能看到的解决办法 多人协作 多人协作一 目标&#xff1a;在远程master分支下的file.txt文件新增代码“aaa”…

鸿蒙OS开发实例:【窥探网络请求】

HarmonyOS 平台中使用网络请求&#xff0c;需要引入 "ohos.net.http", 并且需要在 module.json5 文件中申请网络权限, 即 “ohos.permission.INTERNET” 本篇文章将尝试使用 ohos.net.http 来实现网络请求 场景设定 WeiBo UniDemo HuaWei : 请求顺序WeiBo1 UniDem…

华为数通 HCIP-Datacom H12-831 题库补充(3/27)

2024年 HCIP-Datacom&#xff08;H12-831&#xff09;最新题库&#xff0c;完整题库请扫描上方二维码&#xff0c;持续更新。 如图所示&#xff0c;关于R4路由器通过IS-IS计算出来的IPv6路由&#xff0c;哪一选项的描述是错误的&#xff1f; A&#xff1a;R4通过IS—IS只学习到…

基于SpringBoot的“校园台球厅人员与设备管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“校园台球厅人员与设备管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统首页界面图…

【OpenEuler】Docker部署Oracle和SQL Server

背景 国产化的浪潮&#xff0c;也打到了我的头上 安装步骤 Oracle docker run -d -p 1521:1521 -p 8080:8080 --name oracle_11g -e ORACLE_HOME/home/oracle/app/oracle/product/11.2.0/dbhome_2 -e ORACLE_SIDhelowin registry.cn-hangzhou.aliyuncs.com/helowin/oracle_…

达梦数据库的会话数限制

达梦可以通过初ini参数MAX_SESSIONS在全局设置数据库的最大连接数&#xff0c;也可以在创建用户时指定SESSION_PER_USER选项针对特定用户进行限制。 无论哪种限定&#xff0c;到达规定的会话数时客户端都将报如下错误&#xff1a; [-6001]:Exceed maximum session limitation.…

PCL拟合并绘制平面(二)

使用RANSAC拟合点云平面 1、C实现2、效果图 普通的点云平面拟合方式在一般情况下可以得到较好的平面拟合效果&#xff0c;但是容易出现平面拟合错误或是拟合的平面不是最优的情况。此时就需要根据自己的实际使用情况&#xff0c;调整平面拟合的迭代次数以及收敛条件。 使用RAN…

智慧工地整体解决方案(1)

背景 建筑行业是我国国民经济的重要物质生产部门和支柱产业之一,在改善居住条件、完善基础设施、吸纳劳动力就业、推动经济增长等方面发挥着重要作用。与此同时,建筑业也是一个安全事故多发的高危行业。近年来,在国家、各级地方政府主管部门和行业主体的高度关注和共同努力下…

亚马逊测评新策略:解决底层环境防关联,提升下单成功率

对于做测评的环境系统&#xff0c;确保稳定性和成功率是非常重要的。市面上有各种环境方案&#xff0c;如虚拟机、模拟机、gcs、云手机、VPS等。然而&#xff0c;这些方案不仅成本高&#xff0c;而且成功率很低。因此&#xff0c;一个好的环境系统是成功的基础。 亚马逊平台的…

Python 从0开始 一步步基于Django创建项目(8)使用表单编辑既有条目

与《Python 从0开始 一步步基于Django创建项目&#xff08;6&#xff09;》中的表单应用不同。 前者&#xff0c;是使用表单&#xff0c;提交新数据&#xff0c;新增内容。 本文&#xff0c;是使用表单&#xff0c;对既有数据&#xff0c;进行修改。 因为是对既有数据进行修…

vue v-model(二)

v-model 的参数​ 组件上的 v-model 也可以接受一个参数&#xff1a; <MyComponent v-model:title"bookTitle" /> 在子组件中&#xff0c;我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数&#xff1a; <!-- MyComponent.vue …

蓝桥杯23年第十四届省赛-接龙数列|DFS、线性DP

题目链接&#xff1a; 1.接龙数列 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2023年第十四届省赛真题-接龙数列 - C语言网 (dotcpp.com) 说明&#xff1a; dfs要注意&#xff0c;不能连上的时候绝对不选&#xff1b;能连上的时候可以选&#xff0c;也可以不选。不选的dfs分支是必须经过…

记录rocketMQ5.+启动报错解决过程

1.根据官方文档指引下载对应的rocketMQ源码包&#xff0c;上传到服务器解压 2. 启动NameServer nohup sh bin/mqnamesrv & 验证namesrv是否启动成功 tail -f ~/logs/rocketmqlogs/namesrv.log The Name Server boot success… 3.启动BrokerProxy nohup sh bin/mqbroker -n …

第3章.引导ChatGPT精准角色扮演:高效输出专业内容

角色提示技术 角色提示技术&#xff08;role prompting technique&#xff09;&#xff0c;是通过模型扮演特定角色来产出文本的一种方法。用户为模型设定一个明确的角色&#xff0c;它就能更精准地生成符合特定上下文或听众需求的内容。 比如&#xff0c;想生成客户服务的回复…

Java作业3-字符串

题目一 代码 import java.util.*; public class Main {public static void main(String[] args) {Scanner input new Scanner( System.in );String str input.nextLine();int len str.length();StringBuilder s new StringBuilder(len);//StringBuilder类参考菜鸟教程for…

Kotlin 协程和 Java 线程有什么区别?

Kotlin 协程和 Java 线程是两种不同的并发编程工具&#xff0c;它们在设计哲学、实现机制和使用方式上都有所区别。以下是 Kotlin 协程和 Java 线程之间的一些主要区别&#xff1a; ### 轻量级与资源消耗 - **Kotlin 协程**&#xff1a; - 协程是一种轻量级的并发单位&…