在父组件中给子组件添加类名,子组件的样式由父组件决定
由于"微信小程序"存在【样式隔离机制】，且默认设置为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;
}
