文件
OmniCard/mpuniapp/pages/CSS/style-isolation/parent-child.uvue

35 行
700 B
Plaintext

<template>
<!-- 默认策略下,父组件的样式不会影响子组件。
但在web下子组件的根节点依然可能会受父组件的影响,
所以需要尽可能避免在子组件的根节点加父组件的样式。 -->
<view>
<view class="child-box">
<text class="child-text">{{ text }}</text>
</view>
</view>
</template>
<script setup lang="uts">
defineProps({
text: {
type: String,
default: '子组件'
}
})
</script>
<style>
.child-box {
background-color: #E3F2FD;
padding: 10px;
border-radius: 6px;
border: 2px solid #2196F3;
margin: 5px;
}
.child-text {
color: #1565C0;
font-size: 13px;
}
</style>