为什么不使用 `::v-deep` 选择器就可以在 Vue2 中定位子组件?
Why does targeting a child component work in Vue2 without using the `::v-deep` selector?
我在 Vue 2.x 中有一个项目,我想知道为什么使用 /deep/
定位子组件的 class 可以 而不用 , ::v-deep
或 >>>
个选择器。
我在项目中使用这些:
"node-sass": "5.0.0",
"sass": "1.32.12",
"sass-loader": "10.1.1",
此外,我还创建了一个 sandbox 来实时演示该问题。
如果我在父组件中,我甚至可以在 scoped 样式中定位子组件,如下所示:
<style lang="scss" scoped>
.parent-component {
.child-component {
/* I set the child components background color even though I don't use a `deep` selector */
background-color: blue;
}
}
</style>
在子组件中我有:
<style lang="scss" scoped>
.child-component {
/* I'm overwritten by the parent component */
background-color: red;
}
</style>
根据我对作用域样式如何工作的理解,如果我不在父级中做这样的事情,这实际上是行不通的:
<style lang="scss" scoped>
.parent-component {
::v-deep .child-component {
background-color: blue;
}
}
</style>
您可以在不使用 ::v-deep
的情况下仅影响子组件的根元素。如果这样写,样式将不会被应用。
<template>
<div>
<div class="child-comp">
How in the world am I styled without /deep/ or ::v-deep or >>>
</div>
</div>
</template>
我在 Vue 2.x 中有一个项目,我想知道为什么使用 /deep/
定位子组件的 class 可以 而不用 , ::v-deep
或 >>>
个选择器。
我在项目中使用这些:
"node-sass": "5.0.0",
"sass": "1.32.12",
"sass-loader": "10.1.1",
此外,我还创建了一个 sandbox 来实时演示该问题。
如果我在父组件中,我甚至可以在 scoped 样式中定位子组件,如下所示:
<style lang="scss" scoped>
.parent-component {
.child-component {
/* I set the child components background color even though I don't use a `deep` selector */
background-color: blue;
}
}
</style>
在子组件中我有:
<style lang="scss" scoped>
.child-component {
/* I'm overwritten by the parent component */
background-color: red;
}
</style>
根据我对作用域样式如何工作的理解,如果我不在父级中做这样的事情,这实际上是行不通的:
<style lang="scss" scoped>
.parent-component {
::v-deep .child-component {
background-color: blue;
}
}
</style>
您可以在不使用 ::v-deep
的情况下仅影响子组件的根元素。如果这样写,样式将不会被应用。
<template>
<div>
<div class="child-comp">
How in the world am I styled without /deep/ or ::v-deep or >>>
</div>
</div>
</template>