如何在vue中使用::v-deep(<inner-selector>)？

Question

我正在尝试将现有样式 class 应用于将使用 v-html 加载的子元素，因为 /deep/ 和 >>> 已被弃用，我尝试使用 ::v-deep 在 vue.

<template>
<div v-else v-html="childHtml" class="parent-class"></div>
</template>

<style scoped>
.parent-class ::v-deep .child-class {
  border: unset;
  border-radius: 2px;
  margin: 0 auto;
  margin-bottom: 2%;
  background-color: #fff;
  box-sizing: border-box;
  zoom: 70%;
}
</style>

但是 vue 编译器说，*::v-deep 作为组合器的用法已被弃用。请改用 ::v-deep() 。（使用 Vue 3.0.0-beta.1）

如何使用 ::v-deep() 并消除此编译错误？？

请帮忙，提前致谢

Answer 1

如果您不使用 sass/scss，可以尝试使用 >>> .class-i-want-deep{ /// }。来自 vue-loader 的文档 here 在错误消息方面，它说：

"*::v-deep 用作组合器已被弃用。请改用 ::v-deep()。（使用 Vue 3.0.0-beta.1）"

所以看起来你的 ::v-deepis here 的语法在 Vue 3 中不再被允许。尝试使用新的 ::v-deep()，我找不到具体的文档。更新：看起来 ::v-deep() 与 3.0 一起使用适用于 OP。还没有复制它。

如何在vue中使用::v-deep(<inner-selector>)？

How to use ::v-deep(<inner-selector>) in vue?

css

vue.js

vuejs2

vuejs3