『VUE』27. 透传属性与inheritAttrs(详细图文注释)
目录
- 什么是透传属性(Forwarding Attributes)
- 使用条件唯一根节点
- 禁用透传属性继承
- 总结
欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
什么是透传属性(Forwarding Attributes)
在 Vue.js 中,透传属性(Forwarding Attributes)是指在组件中将父组件传递给子组件的属性,直接传递给子组件内部的某个特定元素或子组件。这样可以使得父组件的属性在子组件中使用,而无需显式地在子组件中声明这些属性。
使用条件唯一根节点
相当于<h3>透传属性</h3>获得了<AttrComponent class="attr-container" />的class="attr-container"
如果有如下结构,有两个h3那么不是唯一的根节点,不会生效
<template><h3>透传属性</h3><h3>透传属性2</h3>
</template>

App.vue
<template><!-- <GlobalHeader /><Main /><Aside /> --><!-- <Parent /> --><!-- <ComponentEvent /> --><!-- <ComponentP /> --><AttrComponent class="attr-container" />
</template><script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
// import Child from "./components/Child.vue";
// import Parent from "./components/Parent.vue";
// import ComponentEvent from "./components/ComponentEvent.vue";
// import ComponentEventSon from "./components/ComponentEventSon.vue";
// import Main from "./components/Main.vue";
// import ComponentP from "./components/ComponentP.vue";
import AttrComponent from "./components/AttrComponent.vue";export default {components: {// Header,// Main,// Aside,// Child,// Parent,// ComponentEvent,// ComponentEventSon,// Main,// ComponentP,AttrComponent,},
};
</script><style scoped></style>
./components/ComponentP.vue
AttrComponent.vue
<template><h3>透传属性</h3>
</template><style>
.attr-container {color: red;
}
</style>
禁用透传属性继承
使用 inheritAttrs: false: 在子组件中将 inheritAttrs 设置为 false,可以阻止自动将父组件的属性应用到根元素上,需要手动处理透传属性。

AttrComponent.vue
<template><h3>透传属性</h3><!-- <h3>透传属性2</h3> -->
</template><script>
export default {inheritAttrs: false,
};
</script><style>
.attr-container {color: red;
}
</style>
总结
大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!
版权声明:
发现你走远了@mzh原创作品,转载必须标注原文链接
Copyright 2024 mzh
Crated:2024-3-1
欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』
相关文章:
『VUE』27. 透传属性与inheritAttrs(详细图文注释)
目录 什么是透传属性(Forwarding Attributes)使用条件唯一根节点禁用透传属性继承总结 欢迎关注 『VUE』 专栏,持续更新中 欢迎关注 『VUE』 专栏,持续更新中 什么是透传属性(Forwarding Attributes) 在 V…...
借助Excel实现Word表格快速排序
实例需求:Word中的表格如下图所示,为了强化记忆,希望能够将表格内容随机排序,表格第一列仍然按照顺序编号,即编号不跟随表格行内容调整。 乱序之后的效果如下图所示(每次运行代码的结果都不一定相同&#x…...
数据结构 ——— 层序遍历链式二叉树
目录 链式二叉树示意图编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同,前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式,如上图:层序遍历的…...
使用 Prompt API 与您的对象聊天
tl;dr:GET、PUT、PROMPT。现在,可以使用新的 PromptObject API 仅使用自然语言对存储在 MinIO 上的对象进行总结、交谈和提问。在本文中,我们将探讨这个新 API 的一些用例以及代码示例。 赋予动机: 对象存储和 S3 API 的无处不在…...
SpringBoot整合Mybatis-Plus实践汇总
相关依赖 MyBatis-Plus涉及的依赖主要是Mybatis-start、和分页插件的依赖,不考虑使用额外分页插件的前提下,只需要mybatis-plus-boot-starter一个依赖即可与SpringBoot集成: <!--Mybatis-plugs--><dependency><groupId>co…...
基于Spring Boot的在线性格测试系统设计与实现(源码+定制+开发)智能性格测试与用户个性分析平台、在线心理测评系统的开发、性格测试与个性数据管理系统
博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…...
Python实现人脸识别算法并封装为类库
引言 人脸识别技术在现代社会中应用广泛,从安全监控到智能门锁,再到社交媒体中的照片标记功能,都离不开这项技术。本文将详细介绍如何使用Python实现基本的人脸识别算法,并将其封装为一个类库,以便在多个项目中复用。…...
uniapp小程序分享使用canvas自定义绘制 vue3
使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式,在遇到特殊页面需要单独处理 utils/share.js import { ref } from vue; export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare {title: 分享的标题,path: /pages/home/…...
SpringCloud核心组件(四)
文章目录 NacosNacos 配置中心1.起源2.基本概念ProfileData IDGroup 3.基础配置a. bootstrap.ymlb. application.ymlc. nacos 中的配置 DataIDd.测试读取配置中心配置内容 4.配置隔离a.命名空间b.DataIDc.bootstrap.ymld.service 隔离 5.配置拆分a.配置拆分策略b.DataID 配置c.…...
如何把本地docker 镜像下载用到centos系统中呢?
如果需要将镜像下载到本地或在 CentOS 系统上使用该镜像,你可以按照以下步骤操作: 1. 拉取镜像 如果想将镜像从 Docker Hub 或其他镜像仓库下载到本地,可以使用 docker pull 命令。 如果使用的是本地构建的镜像(如 isc:v1.0.0&…...
Godot的开发框架应当是什么样子的?
目录 前言 全局协程还是实例协程? 存档! 全局管理类? UI框架? Godot中的异步(多线程)加载 Godot中的ScriptableObject 游戏流程思考 结语 前言 这是一篇杂谈,主要内容是对我…...
GitHub新手入门 - 从创建仓库到协作管理
GitHub新手入门 - 从创建仓库到协作管理 GitHub 是开发者的社交平台,同时也是代码托管的强大工具。无论是个人项目、开源协作,还是团队开发,GitHub 都能让你轻松管理代码、版本控制和团队协作。今天,我们将从基础开始,…...
作业25 深度搜索3
作业: #include <iostream> using namespace std; bool b[100][100]{0}; char map[100][100]{0}; int dx[4]{0,1,0,-1}; int dy[4]{1,0,-1,0}; int n,m; int sx,sy,ex,ey; int mink2147483647; void dfs(int,int,int); int main(){cin>>n>>m;for(…...
ubuntu20.04 colmap 安装2024.11最新
很多教程都很落后了,需要下载压缩包解压编译的很麻烦 现在就只需要apt install就可以了 apt更新 sudo apt update && sudo apt-get upgrade安装依赖 #安装依赖 sudo apt-get install git cmake ninja-build build-essential libboost-program-options-de…...
WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇
WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule [WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇](本文) WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前…...
python os.path.basename(获取路径中的文件名部分) 详解
os.path.basename 是 Python 的 os 模块中的一个函数,用于获取路径中的文件名部分。它会去掉路径中的目录部分,只返回最后的文件名或目录名。 以下是 os.path.basename 的详细解释和使用示例: 语法 os.path.basename(path) 参数 path&…...
《FreeRTOS任务基础知识以及任务创建相关函数》
目录 1.FreeRTOS多任务系统与传统单片机单任务系统的区别 2.FreeRTOS中的任务(Task)介绍 2.1 任务特性 2.2 FreeRTOS中的任务状态 2.3 FreeRTOS中的任务优先级 2.4 在任务函数中退出 2.5 任务控制块和任务堆栈 2.5.1 任务控制块 2.5.2 任务堆栈…...
036集——查询CAD图元属性字段信息:窗体显示(CAD—C#二次开发入门)
提取CAD图元所有属性字段,通过窗体显示,效果如下:(curve改为entity) 代码如下: public void 属性查询() {List<Curve> ents Z.db.SelectEntities<Curve>();if (ents is null ||ents.Cou…...
Swift从0开始学习 函数和闭包 day2
一、函数 1.1函数定义 使用 func 来声明一个函数,使用名字和参数来调用函数。使用 -> 来指定函数返回值的类型。 示例:拼接字符串 //有参数和返回值的函数 func append1(name : String, description : String) -> String {return "\(name)…...
内网、公网(外网)划分
内网、公网(外网)划分 声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其…...
索尼相机隐藏功能完全解锁指南:OpenMemories-Tweak终极教程
索尼相机隐藏功能完全解锁指南:OpenMemories-Tweak终极教程 【免费下载链接】OpenMemories-Tweak Unlock your Sony cameras settings 项目地址: https://gitcode.com/gh_mirrors/op/OpenMemories-Tweak 还在为索尼相机的30分钟录制限制而烦恼吗?…...
SRS服务器从编译到实战:Ubuntu环境下的RTMP/WebRTC全协议测试
SRS服务器从编译到实战:Ubuntu环境下的RTMP/WebRTC全协议测试 在流媒体技术快速发展的今天,构建一个高效、稳定的视频服务器成为许多开发者和企业的核心需求。SRS(Simple Realtime Server)作为一款开源的实时视频服务器,凭借其对多种流媒体协…...
AI 编程时代来了:为什么每个开发者都要学会用 AI 写代码
2026 年,不会用 AI 写代码的开发者,就像 2010 年不会用 Google 的程序员一样——不是不能工作,而是效率会被远远甩在后面。先看一组数字 根据 GitHub 2026 年开发者调查报告: 73% 的开发者在工作中使用了 AI 编程工具55% 的代码由…...
别再死磕MIG了!ZYNQ PS端DDR3做帧缓存,用VDMA+HP接口实战指南
ZYNQ视频处理架构革命:VDMAHP接口实战全解析 从传统FPGA到ZYNQ的思维转换 在传统FPGA视频处理项目中,工程师们早已习惯使用MIG IP核管理DDR控制器,通过用户接口实现帧缓存功能。这种模式在纯FPGA环境中运行良好,但当转向ZYNQ平台…...
突破性网络资源嗅探解决方案:从技术困境到智能下载的革命性跨越
突破性网络资源嗅探解决方案:从技术困境到智能下载的革命性跨越 【免费下载链接】res-downloader 资源下载器、网络资源嗅探,支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https://gi…...
3种技术方案将ComfyUI模型下载速度提升400%:多线程加速与断点续传深度优化
3种技术方案将ComfyUI模型下载速度提升400%:多线程加速与断点续传深度优化 【免费下载链接】ComfyUI-Manager 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager 在AI创作工作流中,大模型文件的下载效率直接影响创作体验。当面对数G…...
OWL ADVENTURE编辑功能展示:一键换装、智能擦除,效果自然
OWL ADVENTURE编辑功能展示:一键换装、智能擦除,效果自然 1. 编辑功能概览:像玩游戏一样修图 OWL ADVENTURE的图片编辑功能让人眼前一亮。不同于传统修图软件的复杂操作,它通过自然语言指令就能完成各种编辑任务,效果…...
别再死记硬背TTS原理了!用Python+TensorFlow复现一个简易Deep Voice,从音素到语音全流程拆解
用PythonTensorFlow实战Deep Voice:从音素到语音的完整实现指南 当你第一次听到计算机生成的语音时,是否好奇过这背后的魔法是如何实现的?现代文本转语音(TTS)系统已经能够产生几乎与真人无异的语音,而Deep Voice作为早期端到端TT…...
开源OFA模型多场景落地:新闻图库自动配文、政府信息公开图片无障碍描述生成
开源OFA模型多场景落地:新闻图库自动配文、政府信息公开图片无障碍描述生成 1. 项目概述:让图片会说话的智能助手 你有没有遇到过这样的情况:看着一张图片,却不知道该怎么用文字描述它?或者需要为大量图片手动添加文…...
试盘Z之主力操盘线
试盘K,以满足特定条件后对该K线标注为试盘字样方便查看。同时通达对9日最低值与9日最高值进行EMA移动平均,得出主力操盘线!试盘Z源码:X_1:REF(EMA((HLC)/3,9),1);X_2:EMA(HHV(HIGH,9),3);X_3:EMA(LLV(LOW,9),3);主力操盘线:EMA(X_1*2-X_3,5),…...
