javascript - Vue.js:对子元素使用 CSS 类

Question

我有一个组件 v-popup.vue

<template>
  <div class="overlay">
    <div class="popup">
      <slot></slot>
    </div>
  </div>
</template>

我想从父级设置它的样式，例如:

<template>
  <v-popup class="custom-popup">
    Popup content
  </v-popup>
</template>

<style>
  .custom-popup {
    padding: 20px;
  }
</style>

如何配置 v-popup.vue要制作的组件 custom-popup类被自动添加到 div.popup ，而不是 div.overlay ?

Answer 1

范围样式

使用 scoped样式(在 parent 和 child 中)是一个好主意，将使这个解决方案更容易。

而不是创建一个新的 custom-popup类，使用 deep selector在 parent 。这允许父组件为使用相同选择器的子组件定义额外的样式。

深度选择器如下所示:>>>除非您使用的是 SCSS/SASS 预处理器。然后你使用 ::v-deep反而。

<template>
  <v-popup>
    Popup content
  </v-popup>
</template>

<style scoped>
  >>> .popup {
    padding: 20px;
  }

  /* If using SCSS/SASS, do this instead */
  /*
  ::v-deep .popup {
    padding: 20px;
  }
  */
</style>

child 将使用自己的 .popup类(class)和来自 parent 的类(class)。
如果您不使用范围样式，如果您想在多个 parent 中导入 child 并每次使用不同的样式，很快就会成为问题。