单文件组件样式特性 | Vue.js

vue3单文件组件中，处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类；

<style scoped>
    :deep(.el-input) {
        width: 200px;
        height: 40px;
    }
</style>

使用下面的这些写法时，编译的时候终端会有警告；

（1）::v-deep

<style scoped>
    ::v-deep(.el-input) {
        width: 200px;
        height: 40px;
    }
</style>

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

（2）/deep/

<style scoped>
    /deep/ .el-input {
        width: 200px;
        height: 40px;
    }
</style>

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

（3）排查时，发现同事写错的，使用了 :deep，但是写法不对，没用括号，而是跟写法2一样。。。可以运行，但却是跟写法1编译时产生的警告一模一样。

<style scoped>
    :deep .el-input {
        width: 200px;
        height: 40px;
    }
</style>

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.