vue 组件样式添加注意事项

<template>
  <div class="tab-bar-item">
    <slot v-if="isActive" name="tabbar-icon"></slot>
    <slot v-else name="tabbar-icon-active"></slot>
    <slot name="tabbar-text" :class="{active:isActive}" ></slot>//这个样式是不起作用的，因为这个模板会被全部替换掉
  </div>
</template>

一般在设置插槽时可以这样写，给每隔插槽外层套一个div，把样式加在div上，这样其他组件在调用该组件时就可以使用该组件的动态样式了：

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