英文:
Is v-deep an anti-pattern in Vue.js?
问题
When styling a Vue.js component, you can use ::v-deep to target CSS classes of nested components, e.g.
<template>
<div class="parent">
<Child /> <!-- contains .grandchild CSS class -->
</div>
</template>
// ...
<style lang="scss" scoped>
.parent {
::v-deep {
.grandchild {
display: block;
}
}
}
</style>
由于重命名或删除 .grandchild 可能会影响 Child 的使用者，所以使用 v-deep 是否被认为是不良做法？
英文:
When styling a Vue.js component, you can use ::v-deep to target CSS classes of nested components, e.g.
<template>
<div class="parent">
<Child /> <!-- contains .grandchild CSS class -->
</div>
</template>
// ...
<style lang="scss" scoped>
.parent {
::v-deep {
.grandchild {
display: block;
}
}
}
</style>
Given that renaming or removing .grandchild could break consumers of Child, isn't using v-deep considered bad practice?
答案1
得分: 3
这取决于上下文，它在你处理无法直接修改的组件时非常重要，例如第三方组件。在其他情况下，最好遵循最佳实践，比如使用 props 来管理子组件的样式，或者使用全局 CSS。
因此，::v-deep 应该只在没有其他选择时作为最后的手段使用。
英文:
It depends on context, it can be esential in cases where you are working with components that you cannot modify directly, e.g. third party components.
In the rest of cases is better to follow best practices such as using props to manage child component styles or using global CSS.
For that reason ::v-deep should be only used as a last resort when there are no other options.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论