Javascript 如何对Vue组件插槽进行属性继承？

我正在编写一个Vue组件，它接受2个插槽：

<template>
  <div class="Component">
    <div class="Component-Label">
      <slot
        name="label"
        class="Component-LabelInner"
      />
    </div>
    <div class="Component-Input">
      <slot
        name="input"
        class="Component-InputInner"
      />
    </div>
  </div>
</template>


<style scoped>
.Component { ... }

.Component-Label { ... }

.Component-LabelInner { ... }

.Component-Input { ... }

.Component-InputInner { width: 100%; ... }
</style>

.Component{…}
.Component标签{…}
.Component Labeliner{…}
.Component输入{…}
.Component输入程序{宽度：100%；…}

出于布局目的，我绝对需要将一些样式应用于

元素，即具有

组件标签纳

和

组件输入纳

类的元素

（准确地说，我需要对

组件输入程序
应用规则
宽度：100%
，通常我会传递
元素，我希望传递到那里的所有内容都延伸到容器。）

问题是，
元素被提供给插槽的内容替换后，
类
属性不会被继承（插槽上似乎没有继承属性），组件标签器
和组件输入器

的CSS选择器不起作用

---

您是否可以将CSS类添加到

替换为的元素中

您不能将类绑定到

插槽

标记。有一些解决方案可以处理这种情况：

安装了Vue

钩子（它可以工作，但看起来不太好）：

Vue.comp组件（“插槽组件”{
模板：“#SlotCompTemplate”，
安装的（）{
//每个插槽都是一个数组，因为您可以传递一组节点，并用模板标记将它们包裹起来
//例如，我只使用第一个VNode
this.slots.one&&this.slots.one[0].elm.classList.add（“一”）；
this.slots.two&&this.slots.two[0].elm.classList.add（“两个”）；
}
});
新Vue({
el:“应用程序”，
数据：{}
})

.one{
颜色：红色
}
.二{
颜色：蓝色
}

一个
两个

True；）。更正。您是否尝试将该类添加到include元素引用中，而不是将

class=“bla”

指定给

？另外，你确定你需要

width:100%

-我的意思是你确定它与

显示

属性值不是

块

或某种类型无关吗？@RokoC.Buljan：当然我可以这样做，但这会打破组件隔离的想法-我必须记住在组件之外添加该类，每次我使用这个组件。我正在寻找一种干净的解决方案，将所有东西封装在组件内。@RokoC.Buljan:我需要

宽度：100%

，因为通常我会将

传递到

输入

插槽

s默认情况下没有

display:block

，因此它们不会调整大小以适应容器，除非您特别告诉它们（我正在尝试这样做）。谢谢，特别是对于多个解决方案。我用过解决方案1（甚至昨天我自己也想出了）#正如您所说，2不会将解决方案封装在组件内（当您使用组件时，必须记住在外部模板中应用属性）#3将其保留在组件中，但我几乎完全避免使用通用选择器，因为它很容易泄漏样式。添加您在#3中建议的包装器不会起作用-我必须直接在插槽中的元素上应用样式#1可能不是最优雅的，但在功能上没有任何缺点。