uniapp + vue2 样式加deep关键字后仍无法穿透问题

原来的无效代码 👇：

/* 父组件 */


<template>
    <view>
        <view>
            <child class='child-box'></child>
        </view>
    </view>
</template>
<script>
import....
export default {
		components: {
		    child
		},
}
</script>
<style lang="scss" scoped>
.child-box{
    ::v-deep .child-item{
        color:red;
    }
}
</style>



/* 子组件 */
<template>
    <view class='child-item'>
        hahaha
    </view>
</template>
<style lang="scss" scoped>
.child-item{
    
}
</style>

百度后的处理方式：

在父组件加入options: { styleIsolation: 'shared' } ,表示这个样式可以跨越scoped向下传递

修正后的代码:

/* 父组件 */


<template>
    <view>
        <view>
            <child class='child-box'></child>
        </view>
    </view>
</template>
<script>
import....
export default {
		components: {
		    child
		},
        /* 就是👇这句 记得加上 ❗️❗️*/
		options: { styleIsolation: 'shared' } ,

}
</script>
<style lang="scss" scoped>
.child-box{
    ::v-deep .child-item{
        color:red;
    }
}
</style>



/* 子组件 */
<template>
    <view class='child-item'>
        hahaha
    </view>
</template>
<style lang="scss" scoped>
.child-item{
    
}
</style>

问题解决可穿透 

总结要点：

1.进行向下穿透的父组件加入options: { styleIsolation: 'shared' } ,这个属性

2.一定要是 ::v-deep 我用之前vue2网页端时写的:deep也是不生效的。这个也很重要！！