uni-app slot插槽内容无法继承子组件的class样式因为data-v-***属性
uni-app slot插槽内容无法继承子组件的class样式因为data-v-***属性
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | macOS 11 | HBuilderX |
产品分类:uniapp/H5
PC开发环境操作系统:Mac
PC开发环境操作系统版本号:macOS 11
HBuilderX类型:正式
HBuilderX版本号:3.1.12
浏览器平台:Chrome
浏览器版本:90.0.4430.93
### 示例代码:
#### Parent.vue
```html
<navBar>
<template slot="left">
<view class="item">
<text class="name">slotName</text>
</view>
<view class="item">
<text class="name">slotName</text>
</view>
</template>
</navBar>
Child.vue
<template>
<view class="navBar">
<view class="left">
<view class="item">
<text class="icon">icon</text>
<text class="name">defaultName</text>
</view>
<slot name="left"></slot>
</view>
</view>
</template>
<script>
export default {
name:"navBar",
props:{},
data() {return {}}
}
</script>
<style>
.navBar { ... }
.navBar .item { display:flex; ... }
.navBar .name { color:red; font-size:14px; padding-left:10px; }
</style>
操作步骤:
同"代码示例"
预期结果:
同"代码示例"
实际结果:
同"代码示例"
bug描述:
提问题没人鸟我,不晓得是 Vue 版本问题又或者怎么回事,这个问题很糟心,在自定义组件过程中,slot 插入的元素如何沿用子组件设置好的默认样式 这样无法做到一次开发处处使用,而是需要单独为 slot 插入的元素复制出一份样式,或者关闭 scoped(你们默认开启) 又或者设置全局样式 不觉得很麻烦么? 大项目不在乎,但是小项目不至于,想可以为 插入的元素&组件设置 子组件的 data-v-*** 属性 方便组件的 slot 插入元素沿用 默认样式
更多关于uni-app slot插槽内容无法继承子组件的class样式因为data-v-***属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app slot插槽内容无法继承子组件的class样式因为data-v-***属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个常见的Vue scoped样式问题。由于uni-app默认使用scoped样式,子组件中的样式会被加上data-v-***属性选择器,而父组件传入的slot内容不会继承这个属性,导致样式无法应用。
解决方案:
- 使用深度选择器:
在子组件样式中使用
::v-deep或/deep/:
.navBar ::v-deep .item { display:flex; }
.navBar ::v-deep .name { color:red; font-size:14px; }
- 使用全局样式: 在App.vue或单独的全局样式文件中定义:
.navBar .item { display:flex; }
.navBar .name { color:red; font-size:14px; }

