vue的scoped的原理是什么呢?

发布网友发布时间：2022-04-24 21:14

共2个回答

懂视网时间：2022-05-14 15:46

除了官方文档给的方案以外，有一个更简便的方式：深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { / ... / }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { / ... / }
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

示例

<div v-html="contentView"></div>

<style scoped>
.product-content {
 ...
 /deep/ h4 {
 color: #333;
 ...
 }
 }
</style>

【相关推荐：JavaScript视频教程】

热心网友时间：2022-05-14 12:54

原理是：vue在编译的时候通过在DOM元素以及css样式上加上唯一标记，实现样式私有化，不污染全局样式。
如：<div class="my-class"></div>编译为<div class="my-class" data-v-56e7f951></div>；对应的样式.my-class编译为.my-class[data-v-56e7f951]。

全部栏目

vue的scoped的原理是什么呢?

示例