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

【问题标题】：How to use ::v-deep(<inner-selector>) in vue?如何在 vue 中使用 ::v-deep(<inner-selector>)？
【发布时间】：2020-10-03 18:43:07
【问题描述】：

我正在尝试将现有样式类应用于将使用v-html 加载的子元素，由于不推荐使用/deep/ 和>>>，我尝试在vue 中使用::v-deep。

<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() 并摆脱这个编译错误？？

请帮忙，在此先感谢

【问题讨论】：

标签： css vue.js vuejs2 vuejs3

【解决方案1】：

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

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

所以看起来你的 ::v-deepis 语法在 Vue 3 中不再允许。尝试使用新的 ::v-deep()，我找不到专门的文档。更新：看起来 ::v-deep() 使用 3.0 正在为 OP 工作。还没有复制它。

【讨论】：

使用 ::v-deep() 后编译警告消失了（Vue 3）..谢谢