在vue文件中使用 deep深度选择器

使用场景#

有的时候我们需要在父组件中去修改第三方组件或者子组件的样式就会使用到deep深度选择器。比如:App组件中定义了.title的样式,也想让Test子组件中的.title也应用对应的样式

App.vue

<template>
  <div class="app">
    <h1>app组件</h1>
    <div class="title">这是app的标题</div>
    <test></test>
  </div>
</template>
<style scoped>
.title {
  color: #f00;
}
</style>

Test.vue

<template>
  <div class="test">
    <h1>Test组件</h1>
    <div class="title">这是test组件的标题</div>
  </div>
</template>

style标签为啥加"scoped"?是为防止在组件中定义的样式,影响到其他的组件。

deep深度选择器#

vue-loader#

为什么会牵扯到vue-loader?因为.vue文件的解析是由vue-loader去处理的,它有如下几个主要的功能:

  • 对template中的资源路径(比如:img以及URL等等)进行转换
  • 除了形成本地的样式之外,还可以对子组件进行传递(scope css)
    ...

相关链接:https://vue-loader.vuejs.org/

deep深度选择器的使用#

/* 
  方式1:.a >>> .b { .... }
  缺点:像 Sass 之类的预处理器无法正确解析 >>>
*/
/* >>> .title {
  color: #f00;
} */

/* 方式2: /deep/ */
/* /deep/ .title {
  color: #f00;
} */

/* 方式3: ::v-deep(选择器) */
/* ::v-deep(.title) {
  color: #f00;
} */

/* 方式4: :deep(选择器) */
:deep(.title) {
  color: #f00;
}

官网并没有说明除了第一种以外其他方式的优缺点,所以得自己领会。

  • 使用/deep/,编辑器会报红色警告,但是项目正常运行。
  • 所以感觉第三和第四种会使用比较频繁点。

参考文章#

穿透不生效问题排查 --- https://juejin.cn/post/7205208559264530488#comment

posted @   ^Mao^  阅读(298)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2022-06-28 echarts不同图表的配置项解释【2】
2022-06-28 echarts矢量地图
点击右上角即可分享
微信分享提示
主题色彩