随笔记：如何在 Vue 修改有 scoped 属性的 css

2021-09-08 126 阅读1分钟

1.只有一个子元素修改的时候

在 style 里的父元素和子元素之间加上 ::v-deep 即可

添加 border 成功

2.如果有多个子元素，需要精确选择到的时候

在 style 里的父元素和子元素之间加上::v-deep，在需要修改的组件新增一个 @Prop（我这里是 Types 组件，代码照下图写即可）

@Prop(String) classPrefix?: string;

在 Types 组件的 template 里需要精确控制的子元素加上以下代码

<template>
  <div>
    <ul class="types">
      // 参考这行代码 ↓
      <li :class="{[classPrefix+'-item']: classPrefix, selected: value === '-'}" @click="selectType('-')">
      支出
      </li>
    </ul>
  </div>
</template>

在引用 Type 组件的文件的 template 里需要精确控制的子元素加上以下代码

<template>
  <div class="x">
    <Layout>
      <Types class-prefix="xxx" :value.sync="yyy"/>
    </Layout>
  </div>
</template>

此时可以精确选择到需要的元素

订正：倒数第三图 template 中 `class="x"` 和 style 中 `.x` 可以一并移除，效果是一样的