vue 组件样式添加注意事项

最新推荐文章于 2024-01-06 23:27:54 发布

原创最新推荐文章于 2024-01-06 23:27:54 发布 · 857 阅读

0 ·

CC 4.0 BY-SA版权

java 同时被 3 个专栏收录

82 篇文章

订阅专栏

spring

64 篇文章

订阅专栏

52 篇文章

订阅专栏

本文探讨Vue中插槽的使用技巧，特别是在动态样式控制方面的应用。通过具体实例，展示了如何利用插槽实现组件间样式传递，确保子组件能够响应父组件的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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