我如何使用/deep/或 >>>或 ::v-deep 在 Vue.js 中?

问题描述

所以，我在 Vue 中阅读了这里.js 中，您可以在选择器中使用 /deep/ 或 >>> 来创建应用于子组件内部元素的样式规则.但是，尝试在我的样式中使用它，无论是在 SCSS 中还是在普通的旧 CSS 中，都不起作用.相反，它们被逐字发送到浏览器，因此没有任何效果.例如:

So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn't work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:

home.vue:

<style lang="css" scoped>
    .autocomplete >>> .autocomplete-input
    {
    // ...
    }
</style>

生成的 css:

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

我想要的:

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

我关于 vue-loader 的 webpack 配置如下所示:

My webpack configuration pertaining to vue-loader looks like this:

// ...
{
    test: /.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

所以我的问题是，如何让这个 >>> 操作符起作用?

So my question is, how do I get this >>> operator to work?

我已经找到了 this 答案，但我正在这样做，但它不起作用...

I've already found this answer, but I'm doing exactly that and it doesn't work...

推荐答案

Vue 2

Sass: 使用 ::v-deep

::v-deep .child-class {
    background-color: #000;
}

不使用 Sass: 使用 >>>

>>> .child-class {
    background-color: #000;
}

无论使用哪种语法，此组件的 标记都必须是 scoped:

With either syntax, the <style> tag for this component must be scoped:

<style scoped>

---

Vue 3

在Vue 3中，我们不再需要>>>并且可以使用统一的::v-deep选择器无论是否使用Sass，但现在建议在选择器中使用括号.

---

Vue 3

In Vue 3, we no longer need >>> and can use the unified ::v-deep selector whether using Sass or not, but now it's recommended to use parentheses with the selector.

使用::v-deep(.child-class)

::v-deep(.child-class) {
    background-color: #000;
}

此外，在 Vue 3 中，对于带有 <slot> 的组件有一种新的语法，它可以对传递的插槽内容进行样式设置.

Additionally, in Vue 3, there is a new syntax for components with a <slot> that enables styling passed slot content.

插槽内容 使用 ::v-slotted(.child-class)

::v-slotted(.slot-class) {
    background-color: #000;
}

最后，在 Vue 3 中，有一种新的语法可以注册全局样式，即使是来自 scoped 组件:

And lastly, in Vue 3, there is a new syntax to register global styles even from a scoped component:

全局样式 使用 ::v-global(.my-class)

::v-global(.my-class) {
    background-color: #000;
}

对于任何语法，此组件的 标记必须是 scoped:

With any syntax, the <style> tag for this component must be scoped:

<style scoped>

---

总结

在 Vue 2 中:

---

Summary

In Vue 2:

• 不推荐使用 /deep/ 语法
• 使用 ::v-deep 与 Sass，使用 >>> 不使用 Sass

• The /deep/ syntax is deprecated
• Use ::v-deep with Sass, use >>> without Sass

在 Vue 3 中:

• ::v-deep .child-class 已被弃用，取而代之的是 ::v-deep(.child-class)
• 不推荐使用 >>> 语法
• 不推荐使用 /deep/ 语法
• 有新的 ::v-slotted 和 ::v-global 选择器

• ::v-deep .child-class is deprecated in favor of ::v-deep(.child-class)
• The >>> syntax is deprecated
• The /deep/ syntax is deprecated
• There are new ::v-slotted and ::v-global selectors

对于每个版本/语法，此组件的 标记必须是 scoped:

With every version/syntax, the <style> tag for this component must be scoped:

<style scoped>

这篇关于我如何使用/deep/或 >>>或 ::v-deep 在 Vue.js 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！