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

文章目录

• • 文章参考
  • 问题描述
  • vue-loader如何处理 `Scoped CSS` ?
  • • 父组件的样式渗透到子组件中的办法?
  • 综合案例

文章参考

1. 深度作用选择器 v-deep

问题描述

1. 工作中需要开发一个 个性化的 二级联动表单，而且是需要根据用户输入自动提示的
2. 因此，考虑到了公司的组件 组件（根据用户输入异步查询下拉提示）
3. 由于 内部封装了 组件，因此需要设置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>

结论

尽量使用 ::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>