当前位置: 首页 > news >正文

『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(详细图文注释)

目录 什么是透传属性&#xff08;Forwarding Attributes&#xff09;使用条件唯一根节点禁用透传属性继承总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 什么是透传属性&#xff08;Forwarding Attributes&#xff09; 在 V…...

借助Excel实现Word表格快速排序

实例需求&#xff1a;Word中的表格如下图所示&#xff0c;为了强化记忆&#xff0c;希望能够将表格内容随机排序&#xff0c;表格第一列仍然按照顺序编号&#xff0c;即编号不跟随表格行内容调整。 乱序之后的效果如下图所示&#xff08;每次运行代码的结果都不一定相同&#x…...

数据结构 ——— 层序遍历链式二叉树

目录 链式二叉树示意图​编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同&#xff0c;前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式&#xff0c;如上图&#xff1a;层序遍历的…...

使用 Prompt API 与您的对象聊天

tl;dr&#xff1a;GET、PUT、PROMPT。现在&#xff0c;可以使用新的 PromptObject API 仅使用自然语言对存储在 MinIO 上的对象进行总结、交谈和提问。在本文中&#xff0c;我们将探讨这个新 API 的一些用例以及代码示例。 赋予动机&#xff1a; 对象存储和 S3 API 的无处不在…...

SpringBoot整合Mybatis-Plus实践汇总

相关依赖 MyBatis-Plus涉及的依赖主要是Mybatis-start、和分页插件的依赖&#xff0c;不考虑使用额外分页插件的前提下&#xff0c;只需要mybatis-plus-boot-starter一个依赖即可与SpringBoot集成&#xff1a; <!--Mybatis-plugs--><dependency><groupId>co…...

基于Spring Boot的在线性格测试系统设计与实现(源码+定制+开发)智能性格测试与用户个性分析平台、在线心理测评系统的开发、性格测试与个性数据管理系统

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

Python实现人脸识别算法并封装为类库

引言 人脸识别技术在现代社会中应用广泛&#xff0c;从安全监控到智能门锁&#xff0c;再到社交媒体中的照片标记功能&#xff0c;都离不开这项技术。本文将详细介绍如何使用Python实现基本的人脸识别算法&#xff0c;并将其封装为一个类库&#xff0c;以便在多个项目中复用。…...

uniapp小程序分享使用canvas自定义绘制 vue3

使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式&#xff0c;在遇到特殊页面需要单独处理 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 系统上使用该镜像&#xff0c;你可以按照以下步骤操作&#xff1a; 1. 拉取镜像 如果想将镜像从 Docker Hub 或其他镜像仓库下载到本地&#xff0c;可以使用 docker pull 命令。 如果使用的是本地构建的镜像&#xff08;如 isc:v1.0.0&…...

Godot的开发框架应当是什么样子的?

目录 前言 全局协程还是实例协程&#xff1f; 存档&#xff01; 全局管理类&#xff1f; UI框架&#xff1f; Godot中的异步&#xff08;多线程&#xff09;加载 Godot中的ScriptableObject 游戏流程思考 结语 前言 这是一篇杂谈&#xff0c;主要内容是对我…...

GitHub新手入门 - 从创建仓库到协作管理

GitHub新手入门 - 从创建仓库到协作管理 GitHub 是开发者的社交平台&#xff0c;同时也是代码托管的强大工具。无论是个人项目、开源协作&#xff0c;还是团队开发&#xff0c;GitHub 都能让你轻松管理代码、版本控制和团队协作。今天&#xff0c;我们将从基础开始&#xff0c…...

作业25 深度搜索3

作业&#xff1a; #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最新

很多教程都很落后了&#xff0c;需要下载压缩包解压编译的很麻烦 现在就只需要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 上篇]&#xff08;本文&#xff09; WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前…...

python os.path.basename(获取路径中的文件名部分) 详解

os.path.basename 是 Python 的 os 模块中的一个函数&#xff0c;用于获取路径中的文件名部分。它会去掉路径中的目录部分&#xff0c;只返回最后的文件名或目录名。 以下是 os.path.basename 的详细解释和使用示例&#xff1a; 语法 os.path.basename(path) 参数 path&…...

《FreeRTOS任务基础知识以及任务创建相关函数》

目录 1.FreeRTOS多任务系统与传统单片机单任务系统的区别 2.FreeRTOS中的任务&#xff08;Task&#xff09;介绍 2.1 任务特性 2.2 FreeRTOS中的任务状态 2.3 FreeRTOS中的任务优先级 2.4 在任务函数中退出 2.5 任务控制块和任务堆栈 2.5.1 任务控制块 2.5.2 任务堆栈…...

036集——查询CAD图元属性字段信息:窗体显示(CAD—C#二次开发入门)

提取CAD图元所有属性字段&#xff0c;通过窗体显示&#xff0c;效果如下&#xff1a;&#xff08;curve改为entity&#xff09; 代码如下&#xff1a; public void 属性查询() {List<Curve> ents Z.db.SelectEntities<Curve>();if (ents is null ||ents.Cou…...

Swift从0开始学习 函数和闭包 day2

一、函数 1.1函数定义 使用 func 来声明一个函数&#xff0c;使用名字和参数来调用函数。使用 -> 来指定函数返回值的类型。 示例&#xff1a;拼接字符串 //有参数和返回值的函数 func append1(name : String, description : String) -> String {return "\(name)…...

内网、公网(外网)划分

内网、公网&#xff08;外网&#xff09;划分 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其…...

DW_apb_uart初始化全流程解析:从时钟门控到中断配置的15个关键步骤

DW_apb_uart深度初始化指南&#xff1a;从寄存器配置到中断优化的15个实战要点 在嵌入式系统开发中&#xff0c;UART通信作为最基础却又最关键的接口之一&#xff0c;其稳定性和性能直接影响整个系统的可靠性。DW_apb_uart作为业界广泛使用的高性能UART IP核&#xff0c;其初始…...

零宽度字符隐写术全解析:从Unicode原理到实战检测工具推荐

零宽度字符隐写术全解析&#xff1a;从Unicode原理到实战检测工具推荐 在数字信息安全的隐秘角落&#xff0c;有一种几乎不可见的通信方式正在被安全研究人员和渗透测试工程师频繁使用——零宽度字符隐写术。这种技术允许我们将秘密信息嵌入普通文本中&#xff0c;肉眼无法察觉…...

PingFangSC字体实战指南:跨平台字体解决方案的最佳实践

PingFangSC字体实战指南&#xff1a;跨平台字体解决方案的最佳实践 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 行业痛点诊断 场景导入&#xff1a;设…...

除了CAN总线,UDS协议还能跑在哪些车上?手把手带你用Wireshark抓包分析

突破CAN总线限制&#xff1a;UDS协议在多种车载网络中的实战解析 当提到UDS&#xff08;Unified Diagnostic Services&#xff09;诊断协议时&#xff0c;大多数工程师的第一反应是它与CAN总线的紧密关联。确实&#xff0c;在传统汽车电子架构中&#xff0c;UDS over CAN是最常…...

Kubernetes 与边缘计算集成最佳实践

Kubernetes 与边缘计算集成最佳实践 一、前言 哥们&#xff0c;别整那些花里胡哨的。边缘计算是现代云原生架构的重要组成部分&#xff0c;今天直接上硬货&#xff0c;教你如何在 Kubernetes 中集成边缘计算。 二、边缘计算架构模式 模式适用场景优势劣势集中式简单场景管理简单…...

革新性跨系统应用运行方案:APK Installer实现Windows原生Android应用体验

革新性跨系统应用运行方案&#xff1a;APK Installer实现Windows原生Android应用体验 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 当您急需在Windows电脑上运行某个…...

3大维度解析BGE向量技术:从原理到检索增强实践

3大维度解析BGE向量技术&#xff1a;从原理到检索增强实践 【免费下载链接】FlagEmbedding Dense Retrieval and Retrieval-augmented LLMs 项目地址: https://gitcode.com/GitHub_Trending/fl/FlagEmbedding 文本嵌入技术是现代AI系统的核心组件&#xff0c;而检索增强…...

如何用OB_Template构建你的终极读书笔记系统:Obsidian新手完全指南

如何用OB_Template构建你的终极读书笔记系统&#xff1a;Obsidian新手完全指南 【免费下载链接】OB_Template OB_Templates is a Obsidian reference for note templates focused on new users of the application using only core plugins. 项目地址: https://gitcode.com/g…...

别再死记公式了!用Python的SymPy库5分钟搞定雅可比矩阵计算(附机器人学实例)

用SymPy解放双手&#xff1a;5分钟完成雅可比矩阵的符号计算与机器人学应用 记得研究生时期推导机械臂动力学方程&#xff0c;我曾在草稿纸上密密麻麻写满三页偏导数&#xff0c;最后发现一个正负号错误导致全部重算。直到遇见SymPy——这个Python符号计算库彻底改变了我的工作…...

OpenWrt固件下载与配置教程:R5S设备从入门到精通

OpenWrt固件下载与配置教程&#xff1a;R5S设备从入门到精通 【免费下载链接】openwrt openwrt编译更新库X86-R2C-R2S-R4S-R5S-N1-小米MI系列等多机型全部适配OTA自动升级 项目地址: https://gitcode.com/GitHub_Trending/openwrt5/openwrt GitHub_Trending/openwrt5/op…...