Vue3 深度选择器 Deep selector

2024-07-01 02:50| 来源: 网络整理| 查看: 265

什么情况下需要用到深度选择器 Deep selector ?

有如下组件定义

// Vue SFC .container .el-card-title{ font-weight: bold; }

期望设置el-card-title的title为加粗，实际无效。实际上生成代码

// 示例编译后代码 Part 1 .container .el-card-title[data-v-XXX0001]{ // 显然这里无法正确匹配 font-weight: bold; }

因此就有了 Deep selector。这部分Vue3 的文档有所提及：Vue3: Deep selector

写法变为：

.container :deep(.el-card-title){ font-weight: bold; } 为什么要水这篇文章？

2~3年我遇到这类型的问题，都是Google找到答案，完全没印象。另外，之前用的的Vue 2 跟Vue 3 在使用上有点差别。

Vue2 支持以下写法: (来自 Vue-loader文档示例 )

.a >>> .b { /* ... */ } .a::v-deep .b { /* ... */ } .a /deep/ .b { /* ... */ }

Vue3中，实测只有`::v-deep`可用，但不推荐使用。Vue 3推荐使用的方式是

.a :deep(.b) { /* ... */ } 总结

采用scope写样式时，可以用过:deep(.className) 来实现对子组件的样式调整

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章