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

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

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

复制代码
// 小程序编译机制
1. 当 <style scoped> 存在时,uni-app 会通过 ‌添加属性选择器‌ 实现样式隔离(如 [data-v-hash])。
但小程序编译后,自定义组件无法添加此类属性,也就无法命中元素

2. 非 scoped 的 <style> 标签不会添加隔离属性

// H5无论是否添加"scoped"属性,样式表现都一致
H5 的渲染基于浏览器,page 会被解析为 <div> 或 <body> 元素。即使使用 <style scoped>,
由于浏览器默认的样式继承机制, 样式可能间接生效(如通过父元素继承)

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

缺点:所需的CSS属性要逐个设置变量,自定义组件逐个接收
html 复制代码
 <!-- 父组件 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>  
html 复制代码
<!-- 子组件 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:
js 复制代码
 <!-- 父组件 Parent.vue -->
export default {
    options:{
      styleIsolation: 'shared',
    },
    data() {
      return {
      }
    }
}
2.2 组合式api:
js 复制代码
 <!-- 父组件 Parent.vue -->
<script setup>
import { defineOptions } from 'vue';
defineOptions({
  options: {
    styleIsolation: 'shared' 
  }
});
</script>
css 复制代码
<!-- 父组件 Parent.vue(.child-img对应的是子组件中要修改的元素类名) -->
.child-img {
    width: 298rpx;
    height: 186rpx;
    border-radius: 16rpx;
 }


文档地址

相关推荐
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
王佳斌5 小时前
sass变量默认
uni-app
小咕聊编程5 小时前
【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统
微信小程序·小程序·毕业设计·教学辅助系统
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
二饭8 小时前
uniapp与webview通信
uni-app
2501_915909069 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
小咕聊编程18 小时前
【含文档+PPT+源码】基于微信小程序的关爱老年人在线能力评估系统
微信小程序·小程序·毕业设计·老人能力评估
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
2501_915918411 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview
街尾杂货店&1 天前
cssword属性
uni-app