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

范围样式

• 使用范围样式（在父级和子级中）是一个好主意，并且会使这个解决方案更容易。

• 与其创建新custom-popup类，不如在父类中使用深度选择器。这允许父组件为使用相同选择器的子组件定义额外的样式。

• 深度选择器如下所示：>>>除非您使用 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>

孩子会用两个自己的.popup类，然后从父之一。

如果您没有使用作用域样式，那么如果您想在多个父项中导入子项并每次使用不同的样式，这将很快成为一个问题。