Jayin

Vue3 深度选择器 Deep selector

Jayin Taung's photo
Jayin Taung

Table of contents

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

有如下组件定义

// Vue SFC
<template>
 <div class="container">
    <el-card>
      <el-card-title title="Part 1"></el-card-title>
    </a-card>
 </div>
</template>
<style scope>
.container .el-card-title{
    font-weight: bold;
}
</style>

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


// 示例编译后代码
 <div data-v-XXX0001 class="container">
    <div data-v-XXX0002 class="el-card">
      <div data-v-XXX0003 class="el-card-title">Part 1</div>
    </a-card>
 </div>

<style >
.container .el-card-title[data-v-XXX0001]{ // 显然这里无法正确匹配
    font-weight: bold;
}
</style>

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

写法变为：

.container :deep(.el-card-title){
    font-weight: bold;
}

为什么要水这篇文章？

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

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

<style scoped>
.a >>> .b { /* ... */ }
</style>

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

<style scoped>
.a /deep/ .b { /* ... */ }
</style>

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

<style scoped>
.a :deep(.b) { /* ... */ }
</style>

总结

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

Vue.jsCSS