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

我有一个组件

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>

弹出内容
.自定义弹出窗口{
填充：20px；
}

---

如何配置

v-popup.vue

组件，使

自定义弹出

类自动添加到

div.popup

，而不是

div.overlay

？

在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>

导出默认值{
//在这里执行通常的实现。。。
道具：{
弹出类：“”
}
}

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

<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属性的参考：

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

<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对象获取。希望这有帮助！您可以在此处阅读有关此用法的更多信息：

范围样式

• 使用样式（在父级和子级中）是一个好主意，将使此解决方案更容易

• 不要创建新的

  自定义弹出窗口

  类，而是在父级中使用。这允许父级为使用相同选择器的子组件定义额外样式

• 深度选择器如下所示：

  >

  ，除非您使用的是SCSS/SASS预处理器。然后使用

  ：：v-deep

弹出内容
>>>.弹出窗口{
填充：20px；
}
/*如果使用SCS/SASS，请改为使用此操作*/
/*
：：v-deep.popup{
填充：20px；
}
*/

子级将同时使用自己的

.popup

类和父级的类

---

如果不使用作用域样式，则如果希望在多个父级中导入子级并每次使用不同的样式，则很快就会出现问题。

我希望阻止自定义

popupClass

属性。我想知道如何使用

$attrs

。我同意封装，但我正在处理的项目有一些关于封装的遗留代码，我没有时间重构它：(