vue如何给插槽slot设置样式？

vue如何给插槽slot设置样式？

slot是vue的使用中非常重要的一个标签，但是对于这样的标签也有些许问题，如果我们想直接对slot进行样式的编写呢？给slot添加一个id或者class？，不管是静态的class还是动态绑定的class，在实例使用插槽的时候，会直接替换掉

<template>
	<div id='text'>
		<slot :class="{active: isActive}" name="item-text"></slot>
	</div>
</template>

...components假设为'TabBarItem'

如果这样使用插槽

<tab-bar-item>
	<div id='text2'></div>
</tab-bar-item>

这里的text2块会直接替换整个slot，最后浏览器编译成

<div id='text'>
		<div id='text2'></div>
</div>

所以你的class没了？

例子

假设更改前源代码如下

<template>
  <div class="tab-bar-item">
      <slot v-if name="item-icon" ></slot>
      <slot v-else name="item-icon-active" ></slot>
      <slot :class={avtive:isActive} name="item-text"></slot>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  data(){
    return {
      isActive: false
    }
  }
}
</script>

这样无法更改slot中class为active，name为item-text的插槽样式，因为直接被覆盖了，那么如何改呢？

<template>
  <div class="tab-bar-item">
    <div v-if="!isActive">
      <slot name="item-icon" ></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active" ></slot>
    </div>
    <div :class="{active:isActive}">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

在每个slot外面再包一层div即可，将有关属性全部放在外层的div中，而不是slot中，这样就可以保证在替换slot时，不会换掉原有的属性，同时也可以在div中设置class和id，然后设置对应的页面布局