Question

我有两个组件，他们在路由器中有这样的孩子：

{
        path: '/admin',
        component: AdminMain,
        children:[
            {
                path: '/admin',
                component: AdminHome,
                name: 'AdminHome'
            }
        ]
 },
 {
        path: '/',
        component: Home,
        children:[
            {
                path: '/',
                component: Index,
                name: 'Index'
            }
        ]
 }

我想为这些组件做两个单独的布局，以便他们的孩子继承父css。有可能的？目前我在带有作用域的每个组件中加载css文件，因为我的css文件与vuetify css冲突。

Answer 1

您可以deep selectors影响子组件的css

AdminMain.vue （父组件）

<style scoped>
.a >>> .b { /* ... */ }
</style>

将翻译为.a[data-v-f3f3eg9] .b { /* ... */ }

然后.b将影响子组件（AdminHome.vue）

Answer 2

使用v-html创建的DOM内容不受范围样式的影响，但是您仍然可以使用深度选择器设置样式。

Vue文档的Deep Selectors页中的措辞听起来像是矛盾的。但这就是说，例如，如果您想对'p'元素进行作用域样式设置并将这些更改显示在v-html中，则CSS应该看起来像这样。

>>> p {
/* some css */
}

在Vue组件中继承CSS

2 个答案: