vue页面中 v-if的样式不生成

详细问题描述

找到问题了。 vif不要写在slot上面就好了。就是要多一个view来包装一下

代码 ：https://gitee.com/cooliean/uni-bug-report01

index.vue

<template>  
    <container-view class="content" :view-data="viewData">  
        <view>success text</view>  
    </container-view>  
</template>  

<script>  
    import containerView from '../../components/container-view.vue'  
    export default {  
        components: {  
            containerView,  
        },  
        data() {  
            return {  
                viewData: {  
                    success: 1  
                }  
            }  
        },  
        onLoad() {  
            setTimeout(() => {  
                this.viewData = {  
                    success: 0  
                }  
            }, 1000)  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  
</style>

container-view.vue

<template>  
    <view class="container">  
        <view class="container-view" v-if="!viewData.success">  
            <text class="inner-text">error inner text</text>  
        </view>  
        <slot v-else></slot>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            viewData: {  
                type: Object,  
                default: function() {  
                    return {  
                        success: 1  
                    }  
                }  
            }  
        },  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="scss">  
    .container {  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        display: flex;  
    }  
    /* 这个样式不生效，审核元素中没有这个样式 */  
    .container-view {  
        background-color: green;  
    }  

    .inner-text {  
        color: red;  
        font-size: 36rpx;  
    }  
</style>

App.vue

<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
/*  .container-view {  
        background-color: green;  
    } */  
</style>

[内容] container-view组件中的 .container-view不生效，如果页面是nvue将会生效

重现步骤

[步骤] 运行项目就可以

[结果] 背景没有变成绿色，如果打开app.vue中样式注解，就可以生效。为什么组件内部不行

[期望] 背景变成绿色

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号] 2.6.5.20200314

[windows版本号]

[mac版本号] 10.15.3

uni-app运行环境说明

[运行端是h5或app或某个小程序？]

[运行端版本号] 运行 h5 端