Vue2.x父组件影响子组件样式(::v-deep)的办法

原创已于 2024-01-29 16:25:01 修改 · 7.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #v-deep

于 2021-02-01 19:32:26 首次发布

Vue2.x、vuex、iview、vux 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何处理样式穿透的问题，特别是在使用scoped样式时如何影响子组件的样式。探讨了/deep/及::v-deep的选择器用法，并给出了实际案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

文章参考

深度作用选择器 v-deep

问题描述

工作中需要开发一个个性化的二级联动表单，而且是需要根据用户输入自动提示的
因此，考虑到了公司的组件组件（根据用户输入异步查询下拉提示）
由于内部封装了组件，因此需要设置Input组件的样式

期望：scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件

vue-loader如何处理 `Scoped CSS` ?

父组件的样式渗透到子组件中的办法?

>>>

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

将会编译为

.a[data-v-f3f3eg9] .b { /* ... */ }

使用 /deep/

像 Sass 之类的预处理器无法正确解析 >>>

<style lang="scss" scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

在vue-cli3编译时，deep的方式会报错或者警告。

::v-deep

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style>

Vue3 过时 ::v-deep的警告信息处理

在这里插入图片描述
解决办法

结论

尽量使用 ::v-deep 这个命令来作用于子组件内部的样式

综合案例

<template>
  <div class="create-road-illegally--leftlist__filter">
    <div class="filter-container">
      <div class="input-item">
        <el-autocomplete
          style="border: none;"
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
      <span class="divider"> | </span>
      <div class="input-item">
        <el-autocomplete
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.create-road-illegally--leftlist__filter{
  padding: 0 12px;
  .filter-container{
    border: 1px solid rgba(0,0,0,0.30);
    display: flex;
    .input-item{
      width: 160px;
      ::v-deep input {
        border: none;
      }
      // & >>> input{
      //   border: none;
      // }
      // /deep/ input{
      //   border: none;
      // }
    }
    .divider {
      position: relative;
      top: 5px;
    }
  }
}
</stylet>