具有直接子级的Vue-loader深度选择器

Question

我有一个选项卡组件，里面有其他选项卡，如下所示

<tabs :class="{ 'my-class': ifTrue }">
    <tab v-for="tab in tabs">
        ...
    </tab>
    <tab-item v-for="tab in tabs">
        <tabs :class="{ 'my-class': ifTrue }">
            <tab v-for="tab in tabs">
                ...
            </tab>
            <tab-item v-for="tab in tabs">
                ...
            </tab-item>
        </tab>
    </tab-item>
</tab>

<style scoped>
    .no-tabs >>> .tab {
        display: none
    }
</style>

在我使用tabs的组件中，如果它有类，我想隐藏直接的子tab，问题是当我像上面那样应用类时，它也会在tab-item中隐藏tab，我只想隐藏直接的选项卡子。就像这样

In css would be 
.no-tabs > .tab

But in vue i try this but wont work.

.no-tabs >>> > .tab
or
.no-tabs > >>> .tab

但是这两种方法都不起作用，我如何才能只访问第一个选项卡直接子.tab？

我不能编辑tabs组件，这就是我不能直接在那里编辑的原因。

Answer 1

由于某些原因，vue-loader无法理解此表单

.no-tabs >>> > .tab

在中使用它对我很有效

.no-tabs /deep/ > .tab