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

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

news 来源：原创 2025/7/18 5:00:48

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

注意: 这2种方案父子组件<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"样式才生效。

缺点:

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(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)

由于"微信小程序"存在【样式隔离机制】，且默认设置为isolated(启用样式隔离)，因此这里给出以下两种解决方案： 注意: 这2种方案父子组件<style>标签不能添加"scoped" 1.CSS变量穿透（推荐: 此方案不受样…...

编程日记 2025/7/18 5:00:48

AI时代还需要目视解译吗？——目视解译详解

在遥感技术迅猛发展的今天，尽管计算机自动解译算法层出不穷，目视解译仍然保持着其基础性和权威性的地位。作为遥感信息提取的"黄金标准"，目视解译凭借人类认知系统的独特优势，在多个专业领域持续发挥着不可替代的作用。…...

编程日记 2025/7/18 4:51:19

苹果电脑笔记本macos Mac安装mixly 米思齐软件详细指南

一、下载安装包二、安装 1、解压下载的文件，然后将解压后文件夹中的中文名称部分删掉只保留英文名称，例如：mixly2.0-mac 2、将mixly2.0-mac文件夹移动到当前用户的Documents路径下，注意路径中不要有中文。 3、进入mixly2.0-mac文…...

编程日记 2025/7/18 4:45:25

slackware系统详解

Slackware 是最古老的活跃维护的 Linux 发行版之一，由 Patrick Volkerding 于 1993 年创建。它以简洁性、稳定性和遵循 Unix 哲学为核心理念，适合追求高度控制和手动配置的用户。以下是 Slackware 的详细介绍： 1. 核心特点简洁性 (Simplici…...

编程日记 2025/7/17 9:48:43

力扣210（拓扑排序）

210. 课程表 II - 力扣（LeetCode） 这是一道拓扑排序的模板题。简单来说，给出一个有向图，把这个有向图转成线性的排序就叫拓扑排序。如果有向图中有环就没有办法进行拓扑排序了。因此，拓扑排序也是图论中判断有向无环图…...

编程日记 2025/7/18 4:42:28

Promise/A+ 规范中文解读

一、简介 Promise/A 是一个开放、健全且通用的JavaScript Promise标准，由开发者制定并供开发者参考。其核心目标是定义then方法的行为，确保不同Promise实现的互操作性。规范聚焦于异步操作的最终结果交互机制，而非Promise的创建、解决或拒绝…...

编程日记 2025/7/15 1:23:30

主要包含h265 av1 等各种多媒体的具体应用 svac_plugin ZLMediaKit/ext-codec at master cyf88/ZLMediaKit D:\java\xiachu\otherzlm\ZLMediaKit> sip-client GB28181-Service/SipClient at master Washington-DC/GB28181-Service yolo Jackson-Tan/wvp_pro_yolo: 小…...

编程日记 2025/7/18 4:41:14

动态网站 LNMP

一、名词解释： LNMP： L : 代表 Linux 操作系统，为网站提供了可靠的运行环境N : 代表 Nginx，它是一款轻量级的高性能 Web 服务器，能够快速处理大量并发连接，有效提升网站的访问速度和性能 M : 代表…...

编程日记 2025/7/18 4:47:01

【Leetcode刷题随笔】349. 两个数组的交集

1. 题目描述给定两个数组nums1和nums2，返回它们的交集。输出结果中的每个元素一定是唯一的。我们可以不考虑输出结果的顺序。示例1: 输入:nums1 [1,2,2,1], nums2 [2,2] 输出：[2] 题目条件： 1 < nums1.length, nums2.length < 10…...

编程日记 2025/7/16 12:22:09

如何优雅的使用CMake中的FindPkgConfig模块

背景如果你遇到下面的场景，那么FindPkgConfig模块可以用来解决我们引用上游库的问题。上游库没有提供CMake的配置文件。CMake没有提供相应的查找模块，即Find<PackageName>.cmake的文件。上游库提供了pkg-config使用的.pc文件。如果上面三个条…...

编程日记 2025/7/15 14:58:03

Docker Volumes

Docker Volumes 是 Docker 提供的一种机制，用于持久化存储容器数据。与容器的生命周期不同，Volumes 可以独立存在，即使容器被删除，数据仍然保留。以下是关于 Docker Volumes 的详细说明： 1. 为什么需要 Volumes&#…...

编程日记 2025/7/17 16:47:43

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 如何获取当前用户主目录(即:~波浪符号目录)?

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/7/13 20:47:38

day23 机器学习管道 Pipeline

在机器学习中，数据预处理、特征提取、模型训练和评估等步骤通常是按顺序执行的。为了更高效地管理和复用这些步骤，我们可以使用 Pipeline（管道）来构建一个完整的机器学习流水线。本文将详细介绍 Pipeline 的基础概念，并…...

编程日记 2025/7/15 20:06:43

The Graph：区块链数据索引的技术架构与创新实践

作为Web3生态的核心基础设施，The Graph通过去中心化索引协议重塑了链上数据访问的范式。其技术设计不仅解决了传统区块链数据查询的效率瓶颈，还通过经济模型与多链兼容性构建了一个开放的开发者生态。本文从技术角度解析其架构、机制及创新实践。一、技…...

编程日记 2025/7/17 13:27:41

nginx配置sse流传输问题：直到所有内容返回后才往下传输

一、禁用缓冲（如实时流传输）： location /stream {proxy_buffering off; } 二、开启分块传输 location /your-path {proxy_chunked_transfer_encoding on; # 显式启用分块传输（默认已启用） }...

编程日记 2025/6/29 4:11:06

使用Daemonset部署日志收集守护进程

1.DaemonSet简介： 在Kubernetes（简称k8s）中，DaemonSet是一种控制器，用于确保集群中的每个（或部分）节点运行一个指定的Pod副本。DaemonSet非常适合需要全局部署、节点级运行的服务，如…...

编程日记 2025/7/6 15:45:42

在Mac环境下搭建Docker环境的全攻略

在Mac环境下搭建Docker环境的全攻略在现代软件开发中，Docker已经成为不可或缺的工具之一。它不仅简化了应用的部署和管理，还极大地提升了开发效率。然而，在某些公司环境中，桌面版的Docker可能会被禁用，这给开发工作带…...

编程日记 2025/7/15 23:40:14

Go 语言 slice(切片) 的使用

序言在许多开发语言中，动态数组是必不可少的一个组成部分。在实际的开发中很少会使用到数组，因为对于数组的大小大多数情况下我们是不能事先就确定好的，所以他不够灵活。动态数组通过提供自动扩容的机制，极大地提升了开发效率。这…...

编程日记 2025/7/13 6:24:38

C++ string比较、string随机访问、string字符插入、string数据删除

string的字符串进行比较，代码见下。 #include<iostream>using namespace std;int main() {// 1 comparestring s1 "aab";string t11 "aab";int r11 s1.compare(t11);cout << "1: " << r11 << endl;strin…...

编程日记 2025/7/17 11:42:03

web 自动化之 Unittest 应用：测试报告装饰器断言

文章目录一、常见的第三方库结合 unittest 生产 html 格式测试报告1、HtmlTestRunner2、BeatifulReport 二、装饰器 unittest.skip 强制跳过&条件跳过三、unittest的常用断言方法一、常见的第三方库结合 unittest 生产 html 格式测试报告 1、HtmlTestRunner 官网下载 …...

编程日记 2025/7/15 15:20:09

前端基础之《Vue（16）—Vue脚手架介绍》

一、脚手架环境 1、推荐windows10 Node vue/cli(webpack) 2、测试node安装成功 node -v npm -v 3、什么是脚手架 Vue CLI：CLI就是脚手架的意思脚手架生成一套模板（入口文件、配置文件、目录结构） 4、常用的包管理器 npm：no…...

编程日记 2025/7/16 23:55:41

MySQL 事务（一）

文章目录 CURD不加控制，会有什么问题CURD满足什么属性，能解决上述问题？什么是事务为什么要有事务事务的版本支持了解事务的提交方式事务常见操作方式研究并发场景事务的正常操作事务的非正常情况的案例结论事务操作的注意事项 CURD不加控制&…...

编程日记 2025/7/14 23:13:03

Dsp38335利用Bootloader实现在线升级的技术原理

1. Bootloader概述 Bootloader（引导加载程序）是嵌入式系统中负责在设备启动时加载和启动主程序的代码。它通常在系统的闪存或其他非易失性存储器中，并在系统上电时首先执行。Bootloader不仅完成启动操作，还能够提供后续的程序升级…...

编程日记 2025/7/17 8:07:39

【TVM 教程】microTVM PyTorch 教程

Apache TVM 是一个深度的深度学习编译框架，适用于 CPU、GPU 和各种机器学习加速芯片。更多 TVM 中文文档可访问 →https://tvm.hyper.ai/ 作者：Mehrdad Hessar 该教程展示了如何使用 PyTorch 模型进行 microTVM 主机驱动的 AOT 编译。此教程可以在使用…...

编程日记 2025/7/15 8:34:18

利用D435i相机进行SLAM实现建图的关键环节-----Kalibr标定工具以及常见的问题调试

在SLAM系统中，相机标定是获取准确的空间信息和三维重建的关键步骤。对于Intel RealSense D435i这类双目相机，正确的内参和外参不仅能提高位姿估计精度，还能显著改善重建效果。本文将详细介绍如何使用Kalibr对D435i进行双目标定，并…...

编程日记 2025/7/14 22:28:45

old kali网站下载链接爬取-Kali linux 全部版本镜像下载--Index of /kali-images

Kali linux 全部版本镜像下载目的出于该网站不稳定原因，故爬取下载链接，以便网友下载老版本kali from bs4 import BeautifulSoup import requests from urllib.parse import urljoinbase_url "http://old.kali.org/kali-images/" visite…...

编程日记 2025/7/13 9:23:40

基于千眼狼高速摄像机与三色掩模的体三维粒子图像测速PIV技术

研究背景航空航天、能源动力领域，测量三维瞬态流场的速度场信息对于理解流体力学行为、优化系统设计非常关键。传统三维粒子图像测速技术如Tomo层析PIV，因依赖多相机阵列，存在系统体积、操作复杂，在封闭空间测量存在困难&#…...

编程日记 2025/7/13 6:53:09

Tauri(2.5.1)+Leptos(0.7.8)开发桌面应用--程序启动界面

前期使用Tauri(2.5.1)Leptos(0.7.8)写了一个自用桌面小程序，详见：使用Tauri 2.3.1Leptos 0.7.8开发桌面小程序汇总_tauri 小程序-CSDN博客。在此基础上，尝试给程序添加启动界面，效果如下图所示。 1. 添加启动画面设置在src-ta…...

编程日记 2025/7/15 16:20:54

Gmsh划分网格|四点矩形

先看下面这段官方自带脚本 /*********************************************************************** Gmsh tutorial 1** Variables, elementary entities (points, curves, surfaces), physical* entities (points, curves, surfaces)********************************…...

编程日记 2025/7/1 23:29:29

I/O多路复用(select/poll/epoll)

通过一个进程来维护多个Socket，也就是I/O多路复用，是一种常见的并发编程技术，它允许单个线程或进程同时监视多个输入/输出（I/O）流（例如网络连接、文件描述符）。当任何一个I/O流准备好进行读写操…...

编程日记 2025/7/17 21:26:15

一键生成达梦、Oracle、MySQL 数据库 ER 图！解锁高效数据库设计！

从事企业软件项目开发的同学们一定对 ER 图很熟悉，可以帮助用户快速厘清数据库结构，方便后续维护和优化。但是在日常工作中，面对复杂的数据结构，整理表设计文档对于每一位DBA来说都很头大，需要将设计细节转化为条理清晰…...

编程日记 2025/7/13 14:30:13

学习黑客 windows 设置与控制面板详解

Windows 设置与控制面板详解：双剑合璧的系统配置工具 ⚙️🔧 学习目标：理解Windows设置和控制面板的异同、掌握系统配置的安全最佳实践 1. 引言：双界面的系统配置世界 🌐 在Windows操作系统中，有两个强大的…...

编程日记 2025/7/16 23:55:42

pytorch模型画质增强简单实现

使用数据增强技术可以增加数据集中图像的多样性，从而提高模型的性能和泛化能力，主要的图像增强技术包括。亮度，对比度调节在开始图像大小的调整之前我们需要导入数据（图像以眼底图像为例）。 from PIL import Image f…...

编程日记 2025/7/13 5:31:25

C++中的std::allocator

C中的std::allocator 文章目录 C中的std::allocator1.std::allocator1.1C中的placement new 和operator new1.2一个custom allocator的实现1.3使用std::allocator_traits实现allocator 1.std::allocator C中的std::allocator默默工作在CSTL中的所有容器的内存分配上&#xff0…...

编程日记 2025/7/17 17:52:09

Linux文件编程——read函数与lseek函数

一、read函数在 Linux 文件编程中，read 函数是一个系统调用，用于从文件描述符（File Descriptor）指向的文件或设备中读取数据到缓冲区。它是 Unix/Linux 系统编程中实现底层 I/O 操作的核心函数之一。以下是 read 函数的详细使用…...

编程日记 2025/7/16 15:11:33

STM32 变量存储

一、存储区划分与变量分类 STM32的存储空间分为Flash（非易失性）和RAM（易失性）两大区域： Flash存储器代码段（Code）：存储程序指令和常量（如字符串、const变量&…...

编程日记 2025/7/15 5:22:16

解锁性能密码：Linux 环境下 Oracle 大页配置全攻略

在 Oracle 数据库运行过程中，内存管理是影响其性能的关键因素之一。大页内存（Large Pages）作为一种优化内存使用的技术，能够显著提升 Oracle 数据库的运行效率。本文将深入介绍大页内存的相关概念，并详细阐述 Oracle 在…...

编程日记 2025/7/13 1:47:06

HashMap中哈希值与数组坐标的关联

目录 1、哈希值的生成与处理 2、计算桶的索引 3、哈希值总结 4、哈希冲突解决方案 4.1. 拉链法（Separate Chaining） 4.2. 开放寻址法（Open Addressing） 1、线性探测（Linear Probing） 2、二次探测&a…...

编程日记 2025/7/15 8:34:41

GBK与UTF-8编码问题(1)

1. 问题现象我们在编译.py的python代码时，有时会遇到如下图这种问题。提示说“SyntaxError: (unicode error) ‘utf-8’ codec can’t decode byte 0xc4 in position 0: invalid continuation byte”，代码中有中文字符，这似乎和文件的编码方…...

编程日记 2025/7/11 23:01:22

大模型的实践应用41-天气预测与分析决策系统:Qwen3(32B)+langchain框架+MCP(大模型上下文协议)+RAG+传统算法

大家好，我是微学AI，今天给大家介绍一下大模型的实践应用41-Qwen3(32B)+langchain框架+MCP(大模型上下文协议)+RAG+传统算法研发天气预测与分析决策系统。本项目构建一个基于大模型Qwen3(32B)、LangChain框架、MCP协议、RAG技术以及传统算法的天气预测与分析决策系统。该系统通…...

编程日记 2025/7/12 15:25:36

单片机学习Day08--相邻流水灯

一，题目：同时点亮相邻的两个灯，并实现流水设计。亮的是0； 最前面是LED8. #include <REGX51.H> typedef unsigned int u16; typedef unsigned char u8; #define led P2 void delay_10us(u16 t) { while(t--); } void mai…...

编程日记 2025/7/17 0:00:17

邮件营销应对高退信率的策略

一、邮件列表管理 1. 使用专业工具验证借助如 Geeksend 邮箱验证等专业工具，全面清洗邮件列表，剔除无效、过期或格式错误的邮箱地址，确保邮件精准送达有效收件人，从而降低退信率。 2. 定期清理无效地址将定期清理邮件列表纳入…...

编程日记 2025/7/13 18:42:52

无线定位之三 SX1302 网关源码 thread_gps 线程详解

前言笔者计划通过无线定位系列文章、系统的描述 TDOA 无线定位和混合定位相关技术知识点, 并以实践来验证此定位系统精度。笔者从实践出发、本篇直接走读无线定位系统关键节点、网关 SX1302 源码框架,并在源码走读过程中、着重分析与无线定位相关的PPS时间的来龙去脉、并在…...

编程日记 2025/7/11 12:51:55

Kubernetes控制平面组件：Kubelet详解（一）：API接口层介绍

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/7/13 1:43:54

Java项目层级介绍 java 层级层次

java 层级层次实体层控制器层数据连接层 Service : 业务处理类 Repository ：数据库访问类 Java项目层级介绍 https://blog.csdn.net/m0_67574906/article/details/145811846 在Java项目中，层级结构（Layered Architecture&#xf…...

编程日记 2025/7/15 21:12:40

【操作系统】零拷贝技术

1. DMA技术 DMA技术也就是直接内存访问技术。在进行I/O设备和内存的数据传输的时候，数据传输的工作全部交给DMA控制器，而不是CPU负责。 2. 传统的文件传输传统的文件传输的代码如下： read(file, tmp_buf, len); write(socket, tmp_buf,…...

编程日记 2025/7/12 18:02:48

从零构建高性能桌面应用：GPUI Component全解析与实战指南

简介高性能UI组件库正在重塑桌面应用开发的格局，而GPUI Component作为新兴的Rust桌面UI组件库，凭借其卓越的跨平台支持能力、GPU加速渲染和企业级功能特性，正成为构建现代化高性能桌面应用的首选。本文将从零开始，全面解析GPUI Component的核心特性、安装配置流程，并通过…...

编程日记 2025/7/3 23:22:54

java 中 DTO 和 VO 的核心区别

DTO 和 VO 的核心区别特性DTO（数据传输对象）VO（视图对象）设计目的服务层与外部系统（如前端、其他服务）之间的数据传输为前端展示层定制数据，通常与 UI 强绑定数据内容可能包含业务逻辑需要的字…...

编程日记 2025/7/14 0:02:54

bazel迁移cmake要点及具体迁移工程示例(apollo radar)

文章目录 bazel迁移cmake要点及具体迁移工程示例迁移要点指南依赖库管理proto编译目标库及二进制文件生成项目导出runtime_data软件打包 conti_rardar完整迁移过程common_msgcommoncanbusconti_radar编译 bazel迁移cmake要点及具体迁移工程示例迁移要点指南迁移主要的内容包…...

编程日记 2025/7/15 1:17:18

跨时钟域（CDC，clock domain crossing）信号处理

参考视频： 数字IC，FPGA秋招【单bit信号的CDC跨时钟域处理手撕代码合集】_哔哩哔哩_bilibili 一、亚稳态原因是：建立时间和保持时间没有保持住。然后在下图的红框里面，产生亚稳态。因为电路反馈机制，最后大概率会恢复…...

编程日记 2025/6/29 4:14:39

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

缺点：所需的CSS属性要逐个设置变量,自定义组件逐个接收

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

缺点:

2.1 选项式api:

2.2 组合式api:

相关文章：