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

Question

我正在编写一个 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>

出于布局目的，我绝对需要对 <slot> 元素应用一些样式 - 具有 Component-LabelInner 和 Component-InputInner 类的样式。

（准确地说，我需要将规则width: 100% 应用到Component-InputInner，因为通常我会传递到<input> 元素，并且我希望传递到那里的所有内容都延伸到容器。）

问题是<slot> 元素被提供给插槽的内容替换后，class 属性没有被继承（似乎没有在插槽上继承属性）和 .Component-LabelInner 和 @987654331 的 CSS 选择器@不工作。

你能以某种方式将 CSS 类添加到 <slot> 被替换的元素吗？

Answer 1

您不能将类绑定到slot 标记。有一些解决方案可以处理这种情况：

1. 使用 Vue mounted 钩子（它有效，但看起来很糟糕）：

Vue.component("slots-comp", {
  template: "#slotsCompTemplate",
  mounted() {
    // each slot is an array, because you can pass a set of nodes wrap them with template tag
    // I use only first VNode for example
    this.$slots.one && this.$slots.one[0].elm.classList.add("one");
    this.$slots.two && this.$slots.two[0].elm.classList.add("two");
  }
});

new Vue({
  el: "#app",
  data: {}
})

.one {
  color: red
}

.two {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
   <slots-comp>
     <div slot="one">One</div>
     <div slot="two">Two</div>
   </slots-comp>
</div>

<script type="text/x-template" id="slotsCompTemplate">
  <div>
    <slot name="one"></slot>
    <slot name="two"></slot>
  </div>
</script>

1. 将必要的类作为道具传递给作用域插槽（它不是完全封装的解决方案）：

Vue.component("slots-comp", {
  template: "#slotsCompTemplate",
  data() {
  	return {
      classes: {
      	one: ["one"],
        two: ["two"]
      }
    }
  }
});

new Vue({
  el: "#app",
  data: {}
})

.one {
  color: red
}

.two {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
   <slots-comp>
     <div slot-scope="props" :class="props.classes.one" slot="one">One</div>
     <div slot-scope="props" :class="props.classes.two" slot="two">Two</div>
   </slots-comp>
</div>

<script type="text/x-template" id="slotsCompTemplate">
  <div>
    <slot :classes="classes" name="one"></slot>
    <slot :classes="classes" name="two"></slot>
  </div>
</script>

1. 添加对 CSS 的更改以将样式应用于所有内部元素：

   .Component-Input > * 
   {
       /* my rules for child elements */
   }
   
   .Component-Label> * 
   {
       /* my rules for child elements */
   }
   

   或者为具有Component-InputInner 等类的插槽添加包装器元素，并为它们添加类似的样式。

希望它会有所帮助。