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 样式（在父级和子级中）是一个好主意，并且会使这个解决方案更容易。

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

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

孩子将使用 both 它自己的 .popup 类和来自父母的类。

如果你不使用作用域样式，如果你想在多个父母中导入孩子并且每次都使用不同的样式，很快就会成为问题。

Answer 2

在您的 v-popup.vue 中，您可以执行以下操作：

<template>
  <div class="overlay">
    <div :class="['popup', popupClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {

// Do the usual implementations here...
props: {
 popupClass: ''
}

}

</script>

然后在你的父组件中，你可以执行以下操作：

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

不过，我很好奇。为什么不将这个类封装在 v-popup.vue 中。我很少使用这种设计，除非有另一个组件从父级共享这个类。

编辑（根据您的最后评论）： 您可以使用此链接作为如何使用 $attr 属性的参考：https://jsfiddle.net/changjoo_park/pzx08wp9/

因此，从某种意义上说，您可以在父组件中执行以下操作

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

在您的 v-popup 组件中：

<template>
  <div class="overlay">
    <div :class="['popup', $attrs.popupClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {

// Do the usual implementations here...

}

</script>

因此，没有 props 实现，并且类直接取自 $attrs 对象。希望这可以帮助！您可以在此处阅读有关此用法的更多信息：https://vuejs.org/v2/api/#vm-attrs