Vue.js：对子元素使用 CSS 类

Posted 2023-02-22

【中文标题】Vue.js：对子元素使用 CSS 类

【英文标题】：Vue.js: use CSS class for child element

【发布时间】：2020-06-20 17:32:06

【问题描述】：

我有一个组件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？

【参考方案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 类和来自父母的类。

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

【参考方案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

【讨论】：

我想阻止自定义 popupClass 属性。我想知道使用$attrs。我同意封装，但我正在处理的项目有一些遗留代码，我没有时间重构它:(