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内容不会继承这个属性,导致样式无法应用。

解决方案:

  1. 使用深度选择器: 在子组件样式中使用::v-deep/deep/
.navBar ::v-deep .item { display:flex; }
.navBar ::v-deep .name { color:red; font-size:14px; }
  1. 使用全局样式: 在App.vue或单独的全局样式文件中定义:
.navBar .item { display:flex; }
.navBar .name { color:red; font-size:14px; }
回到顶部