为什么我的 Vue.js ::v-deep、>>> 和深度选择器不工作？

>>，深度选择器工作吗？ " />

Vue.js 故障排除 ::v-deep、>> 和深度选择器

背景

Vue.js提供使用深度选择器（如 ::v-deep、>>> 和）在嵌套组件中设置元素样式的方法:deep。但是，在实现这些选择器时会出现问题。

问题

尝试使用 ::v-deep 或 >>> Vue 组件中的元素不会产生任何效果。样式规则会逐字传递给浏览器。

解决方案

Vue 2.0 - 2.6

Sass: 使用 ::v-deep

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

没有Sass：使用>>

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

确保组件的

<style scoped></style>

Vue 3（和Vue 2.7）

使用:deep(.child-class)

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

Vue 3 新选择器

此外，Vue 3 还提供：

• 插槽内容:使用:slotted(.child-class)
• 全局样式： 使用 :global(.my-class)

同样，

<style scoped></style>

Webpack配置

如果使用 Vue Loader，请确保您的配置包括：

{
  test: /\.vue$/,
  use: 'vue-loader',
}

摘要

Vue 2:

• 在 Sass 中使用 ::v-deep，>>>没有 Sass
• 确保

Vue 3:

• 使用 :deep(.child-class)
• ::v-前缀已弃用
• 使用 :slotted 和 :global 选择器作为需要
• 确保标签的作用域是

注意： /deep/ 语法在 Vue 2 和 3 中均已弃用。

以上是为什么我的 Vue.js ::v-deep、>>> 和深度选择器不工作？的详细内容。更多信息请关注PHP中文网其他相关文章！