vue2和vue3深度选择器
有时我们可能想明确地制定一个针对子组件的规则。如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作
·
有时我们可能想明确地制定一个针对子组件的规则。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。
vue2写法
>>>
<style scoped>
.a >>> .b {
/* ... */
}
</style>
2、 /deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
vue3写法
::v-deep() 简写:deep()
<style lang="scss" scoped>
.a{
::v-deep(.b) {
/* ... */
}
:deep(.c){}
}
</style>
新伪元素 ::v-slotted() 简写 :slotted()
Vue 2.x 中,父组件通过 slot 传给子组件的内容是不受子组件局部样式的影响的。到了 Vue 3.x ,我们可以借助新伪元素::v-slotted(),实现子组件控制 slot 的样式。
::v-slotted(.foo) {}
:slotted(.foo){}
新伪元素 ::v-global() 简写 :global()
在 Vue 2.x scoped styles 的样式只能在局部生效。但是到了 Vue 3.x, 这样的“局面”发生了变化。Vue 3.x 增加了一个全新的伪元素::v-global(),借助::v-global(),我们可以让 scoped styles 中的样式到全局中生效。
::v-global(.foo){}
:global(.foo){}
更多推荐
已为社区贡献1条内容
所有评论(0)