当前位置： 首页 > article >正文

uniapp(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)

article 2025/9/26 22:11:42

在父组件中给子组件添加类名,子组件的样式由父组件决定

由于"微信小程序"存在【样式隔离机制】，且默认设置为isolated(启用样式隔离)，因此这里给出以下两种解决方案：

// 小程序编译机制
1. 当 <style scoped> 存在时，uni-app 会通过 ‌添加属性选择器‌ 实现样式隔离（如 [data-v-hash]）。
但小程序编译后，自定义组件无法添加此类属性，也就无法命中元素2. 非 scoped 的 <style> 标签不会添加隔离属性// H5无论是否添加"scoped"属性,样式表现都一致
H5 的渲染基于浏览器，page 会被解析为 <div> 或 <body> 元素。即使使用 <style scoped>，
由于浏览器默认的样式继承机制， 样式可能间接生效（如通过父元素继承）

1.CSS变量穿透（推荐: 此方案不受样式隔离限制，适配所有端）

缺点：所需的CSS属性要逐个设置变量,自定义组件逐个接收
 <!-- 父组件 Parent.vue -->
<template><Child class="parent-style"></Child>
</template><style>
.parent-style {/* 定义 CSS 变量 */--img-width: 262rpx;--img-height: 120rpx;--img-border-radius: 16rpx 16rpx 0 0;
}
</style>  

<!-- 子组件 Child.vue -->
<template><view class="child-box"><image class="child-img" /></view>
</template> <style>
.child-img {width: var(--img-width);height: var(--img-height);border-radius: var(--img-border-radius);
}
</style>

2.配置隔离模式（不太推荐）

styleIsolation是‌"微信小程序‌"特有的样式隔离配置项，具体有哪些属性值在最下方图中。
在测试中,可能是–组件层级–的缘故，只有配置了"shared"、"page-shared"样式才生效。

注意: 父子组件<style>标签不能添加"scoped"属性，可把这个样式单独放进 <style>

缺点:

1.易造成样式污染,即父子组件若存在同类名会相互干扰样式,其他设置了"shared"的组件可能也会受到污染
2.子组件元素要定位明确，否则无法命中元素

2.1 选项式api:
 <!-- 父组件 Parent.vue -->
export default {options:{styleIsolation: 'shared',},data() {return {}}
}
2.2 组合式api:
 <!-- 父组件 Parent.vue -->
<script setup>
import { defineOptions } from 'vue';
defineOptions({options: {styleIsolation: 'shared' }
});
</script>

<!-- 父组件 Parent.vue(.child-img对应的是子组件中要修改的元素类名) -->
.child-img {width: 298rpx;height: 186rpx;border-radius: 16rpx;}

在这里插入图片描述
文档地址

相关文章：

uniapp(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)

在父组件中给子组件添加类名,子组件的样式由父组件决定 由于"微信小程序"存在【样式隔离机制】&#xff0c;且默认设置为isolated(启用样式隔离)&#xff0c;因此这里给出以下两种解决方案&#xff1a; // 小程序编译机制 1. 当 <style scoped> 存在时&#…...

编程日记 2025/9/24 18:41:36

【HCIA】BFD

前言 前面我们介绍了浮动路由以及出口路由器的默认路由配置&#xff0c;可如此配置会存在隐患&#xff0c;就是出口路由器直连的网络设备并不是运营商的路由器&#xff0c;而是交换机。此时我们就需要感知路由器的存活状态&#xff0c;这就需要用到 BFD&#xff08;Bidirectio…...

编程日记 2025/9/24 18:38:32

计算机视觉最不卷的方向：三维重建学习路线梳理

提到计算机视觉&#xff08;CV&#xff09;&#xff0c;大多数人脑海中会立马浮现出一个字&#xff1a;“卷”。卷到什么程度呢&#xff1f;2022年秋招CV工程师岗位数下降了16%&#xff0c;但求职人数增加了23%&#xff0c;求职人数与招聘岗位的比例达到了恐怖的15:1&#xff0…...

编程日记 2025/9/24 18:51:33

android抓包踩坑记录

​ 由于需要公司业务需求&#xff0c;需要抓取APP中摄像机插件的网络包&#xff0c;踩了两天坑&#xff0c;这里做个总结吧。 事先准备 android-studio emulatesdk 需要android模拟器和adb调试工具。如果已经有其他模拟器的话&#xff0c;可以只安装adb调试工具即可 mitmproxy…...

编程日记 2025/9/25 23:08:53

Webpack其他插件

安装html打包插件 const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin) module.exports {entry: path.resolve(__dirname,src/login/index.js),output: {path: path.resolve(__dirname, dist),filename: ./login/index.js,clean:true},Plugin:…...

编程日记 2025/9/24 18:38:28

如何正确地写出单例模式

如何正确地写出单例模式 | Jarks Blog 枚举方式&#xff1a; public class SingletonObject {private SingletonObject() {}/*** 枚举类型是线程安全的&#xff0c;并且只会装载一次*/private enum Singleton {INSTANCE;private final SingletonObject instance;Singleton() {…...

编程日记 2025/8/11 12:53:15

常见相机焦段的分类及其应用

相机焦段是指镜头的焦距范围&#xff0c;决定了拍摄时的视角、画面范围和透视效果。不同焦段适合不同的拍摄场景和主题&#xff0c;以下是常见焦段的分类及其应用&#xff1a; 一、焦段的核心概念 焦距&#xff1a;镜头光学中心到成像传感器的距离&#xff08;单位&#xff1a…...

编程日记 2025/6/23 0:55:28

Python Matplotlib 库【绘图基础库】全面解析

让AI成为我们的得力助手&#xff1a;《用Cursor玩转AI辅助编程——不写代码也能做软件开发》 一、发展历程 Matplotlib 由 John D. Hunter 于 2003 年创建&#xff0c;灵感来源于 MATLAB 的绘图系统。作为 Python 生态中最早的可视化工具之一&#xff0c;它逐渐成为科学计算领…...

编程日记 2025/9/24 18:38:24

C++ string数据查找、string数据替换、string子串获取

string查找示例见下&#xff0c;代码见下&#xff0c;以及对应运行结果见下&#xff1a; #include<iostream>using namespace std;int main() {// 1string s1 "hellooooworld";cout << s1.find("oooo") << endl;// 2cout << (in…...

编程日记 2025/9/24 18:41:20

入侵检测SNORT系统部署过程记录

原理背景知识： 一、入侵检测系统介绍 1、入侵检测系统 入侵检测（Intrusion Detection） 指通过对计算机网络或计算机系统中的若干关键点收集信息并对其进行分析，从中发现网络或系统中是否有违反安全策略的行为和被攻击的迹象。 入侵检测系统（IDS） 是从网络和系统中收集…...

编程日记 2025/9/18 21:25:40

使用 Java 反射动态加载和操作类

Java 的反射机制（Reflection）是 Java 语言的一大特色，它允许程序在运行时检查、加载和操作类、方法、字段等元信息。通过 java.lang.Class 和 java.lang.reflect 包，开发者可以动态加载类、创建实例、调用方法，甚至在运行时构造新类。反射是 Java 灵活性的核心，广泛应用于…...

编程日记 2025/8/6 21:37:09

关于甲骨文（oracle cloud）丢失MFA的解决方案

前两年&#xff0c;申请了一个招商的多币种信用卡&#xff0c;然后就从网上撸了一个oracle的免费1h1g的服务器。 用了一段时间&#xff0c;人家要启用MFA验证。 啥叫MFA验证&#xff0c;类似与短信验证吧&#xff0c;就是绑定一个手机&#xff0c;然后下载一个app&#xff0c;每…...

编程日记 2025/9/24 18:40:51

vue3项目中使用CodeMirror组件的详细教程，中文帮助文档，使用手册

简介 这是基于 Vue 3 开发的 CodeMirror 组件。该组件基于 CodeMirror 5 开发&#xff0c;仅支持 Vue 3。 除了支持官方提供的各种语法模式外&#xff0c;还额外添加了日志输出展示模式&#xff0c;开箱即用&#xff0c;但不一定适用于所有场景。 如需完整文档和更多使用案例…...

编程日记 2025/6/19 22:48:17

C++ stl中的list的相关函数用法

文章目录 list的介绍list的使用定义方式 插入和删除迭代器的使用获取元素容器中元素个数和容量的控制其它操作函数 list的使用&#xff0c;首先要包含头文件 #include <list>list的介绍 1.list是一种可以在常数范围内在链表中的任意位置进行插入和删除的序列式容器&…...

编程日记 2025/9/19 21:13:52

【网络编程】七、详解HTTP 搭建HTTP服务器

文章目录 Ⅰ. HTTP协议的由来 -- 万维网Ⅱ. 认识URL1、URL的格式协议方案名登录信息 -- 忽略服务器地址服务器端口号文件路径查询字符串片段标识符 2、URL的编码和解码 Ⅲ. HTTP的报文结构1、请求协议格式2、响应协议格式&#x1f38f; 写代码的时候&#xff0c;怎么保证请求和…...

编程日记 2025/9/24 18:38:26

[Java实战]Spring Boot 快速配置 HTTPS 并实现 HTTP 自动跳转(八)

[Java实战]Spring Boot 快速配置 HTTPS 并实现 HTTP 自动跳转(八) 引言 在当今网络安全威胁日益严峻的背景下&#xff0c;为 Web 应用启用 HTTPS 已成为基本要求。Spring Boot 提供了简单高效的方式集成 HTTPS 支持&#xff0c;无论是开发环境测试还是生产环境部署&#xff0…...

编程日记 2025/9/24 18:45:35

Spring Boot 中的重试机制

Retryable 注解简介 Retryable 注解是 Spring Retry 模块提供的&#xff0c;用于自动重试可能会失败的方法。在微服务架构和分布式系统中&#xff0c;服务之间的调用可能会因为网络问题、服务繁忙等原因失败。使用 Retryable 可以提高应用的稳定性和容错能力 1。 使用步骤 &…...

编程日记 2025/7/8 2:44:59

【React中useRef钩子详解】

一、useRef的核心特性 useRef是React提供的Hook，用于在函数组件中创建可变的持久化引用，具有以下核心特性： 持久化存储 返回的ref对象在组件整个生命周期内保持不变，即使组件重新渲染，current属性的值也不会丢失。无触发渲染 修改ref.current的值不会导致组件重新渲染，适…...

编程日记 2025/9/20 16:16:51

golang-ErrGroup用法以及源码解读笔记

介绍 ErrGroup可以并发执行多个goroutine&#xff0c;并可以很方便的处理错误 与sync.WaitGroup相比 错误处理 sync.WaitGroup只负责等待goroutine执行完成&#xff0c;而不处理返回值或者错误errgroup.Group目前虽然不能直接处理函数的返回值或错误。但是当goroutine返回错…...

编程日记 2025/9/24 21:18:41

17.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--loki

在微服务中&#xff0c;日志是非常重要的组成部分。它不仅可以帮助我们排查问题&#xff0c;还可以帮助我们分析系统的性能和使用情况。 一、loki简介 loki是一个开源的日志聚合系统&#xff0c;它可以帮助我们高效地收集、存储和分析日志数据。loki的设计理念是“简单、快速…...

编程日记 2025/7/14 23:38:58

CVPR计算机视觉顶会论文解读：IPC-Dehaze 如何解决真实场景去雾难题

【CVPR 2025】迭代预测-评判编解码网络&#xff1a;突破真实场景去雾的极限 摘要 本文提出了一种名为IPC-Dehaze的创新去雾方法&#xff0c;通过迭代预测-评判框架和码本解码机制&#xff0c;有效解决了现有去雾算法在复杂场景下的性能瓶颈。该方法在多个基准测试中取得了SOT…...

编程日记 2025/9/24 18:38:19

ppy/osu构建 ipad作为osu按键xz笔记2 deepwiki websokect

ipad当x和z键玩osu #无声打osu#没磁轴怎么打osu 下载 .NET (Linux、macOS 和 Windows) | .NET dotnet还行 构建&#xff1a;f5 运行&#xff1a;dotnet run --project osu.Desktop -c Debug deepwiki就是nb uinput是ubuntu的我现在没法调试&#xff0c;放着 import asyn…...

编程日记 2025/9/24 18:40:26

scons user 3.1.2

前言 感谢您抽出时间阅读有关 SCons 的内容。SCons 是一款下一代软件构建工具&#xff0c;或者称为 make 工具&#xff0c;即一种用于构建软件&#xff08;或其他文件&#xff09;并在底层输入文件发生更改时使已构建的软件保持最新状态的软件实用程序。 SCons 最显著的特点是…...

编程日记 2025/9/20 16:42:52

大语言模型主流架构解析：从 Transformer 到 GPT、BERT

&#x1f4cc; 友情提示&#xff1a; 本文内容由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;创作平台的gpt-4-turbo模型生成&#xff0c;旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证&#xff0c;建议读者通过官方文档或实践进一步确认其准…...

编程日记 2025/9/2 3:08:17

.NET程序启动就报错，如何截获初期化时的问题json

一&#xff1a;背景 1. 讲故事 前几天训练营里的一位朋友在复习课件的时候&#xff0c;程序一跑就报错&#xff0c;截图如下&#xff1a; 从给出的错误信息看大概是因为json格式无效导致的&#xff0c;在早期的训练营里曾经也有一例这样的报错&#xff0c;最后定位下来是公司…...

编程日记 2025/9/24 18:48:35

nacos：服务注册原理

目录 NaCos服务注册原理1、AbstractAutoServiceRegistration功能和作用onApplicationEvent()方法start()方法 2、NacosAutoServiceRegistration功能和作用NacosAutoServiceRegistration.register()方法AbstractAutoServiceRegistration.register()方法 3、NacosServiceRegistry…...

编程日记 2025/9/24 18:38:30

基于开源AI大模型与S2B2C生态的个人品牌优势挖掘与标签重构研究

摘要&#xff1a;在数字文明时代&#xff0c;个人品牌塑造已从传统经验驱动转向数据智能驱动。本文以开源AI大模型、AI智能名片与S2B2C商城小程序源码为技术载体&#xff0c;提出"社会评价-数据验证-标签重构"的三维分析框架。通过实证研究发现&#xff0c;结合第三方…...

编程日记 2025/9/24 18:39:47

《React Native与Flutter：社交应用中用户行为分析与埋点统计的深度剖析》

React Native与Flutter作为两款备受瞩目的跨平台开发框架&#xff0c;正深刻地影响着应用的构建方式。当聚焦于用户行为分析与埋点统计时&#xff0c;它们各自展现出独特的策略与工具选择&#xff0c;这些差异和共性不仅关乎开发效率&#xff0c;更与社交应用能否精准把握用户需…...

编程日记 2025/9/18 16:15:06

polarctf-web-[简单rce]

考点&#xff1a; (1)RCE(eval函数) (2)执行函数(passthru函数) (3)/顶级(根)目录查看 (4)sort排序查看函数 题目来源&#xff1a;Polarctf-web-[简单rce] 解题&#xff1a; 代码审计 <?php/*​PolarD&N CTF​*/highlight_file(__FILE__);function no($txt){ # …...

编程日记 2025/9/24 9:53:56

深入理解 Cortex-M3 特殊寄存器

在上一篇文章中分享了 Cortex-M3 内核寄存器组的相关知识&#xff0c;实际上除了内核寄存器组外&#xff0c;CM3 处理器中还存在多个特殊寄存器&#xff0c;它们分别为 程序状态寄存器&#xff0c;中断/异常屏蔽寄存器 和 控制寄存器。 需要注意的是&#xff0c;特殊寄存器未经…...

编程日记 2025/9/24 18:52:51