当前位置：首页 > uni-app

uniapp插槽样式

2026-03-05 00:04:44uni-app

uniapp插槽样式问题解决方案

在uniapp中，插槽（slot）的样式处理与普通组件略有不同，需要注意作用域和样式穿透问题。

默认插槽样式

父组件通过插槽传递的内容样式默认受父组件作用域控制。在父组件中直接为插槽内容添加样式即可生效：

<!-- 父组件 -->
<template>
  <child-component>
    <view class="slot-content">这段文字样式由父组件控制</view>
  </child-component>
</template>

<style>
.slot-content {
  color: red;
  font-size: 16px;
}
</style>

具名插槽样式

具名插槽的样式处理方式与默认插槽相同，通过父组件控制样式：

<!-- 父组件 -->
<template>
  <child-component>
    <view slot="header" class="header-style">顶部内容</view>
    <view slot="footer" class="footer-style">底部内容</view>
  </child-component>
</template>

<style>
.header-style {
  background-color: #f0f0f0;
  padding: 10px;
}
.footer-style {
  border-top: 1px solid #eee;
  margin-top: 20px;
}
</style>

作用域插槽样式

作用域插槽的样式可以由父组件或子组件控制，取决于具体需求：

<!-- 子组件 -->
<template>
  <view>
    <slot name="item" v-for="item in list" :item="item">
      <view class="default-item">{{ item.name }}</view>
    </slot>
  </view>
</template>

<style>
.default-item {
  /* 子组件默认样式 */
  padding: 8px;
}
</style>

<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:item="{ item }">
      <view class="custom-item">{{ item.name }}</view>
    </template>
  </child-component>
</template>

<style>
.custom-item {
  /* 父组件覆盖样式 */
  padding: 12px;
  background-color: #f8f8f8;
}
</style>

样式穿透方法

当需要从父组件修改子组件内部插槽样式时，可以使用深度选择器：

/* 使用/deep/选择器 */
.parent-class /deep/ .child-slot-class {
  color: blue;
}

/* 或使用::v-deep */
.parent-class ::v-deep .child-slot-class {
  font-size: 18px;
}

/* 在HBuilderX 3.1.0+版本中推荐使用:deep() */
.parent-class :deep(.child-slot-class) {
  margin: 10px;
}

动态类名处理

通过动态绑定class实现条件样式：

uniapp插槽样式

<template>
  <child-component>
    <view :class="['slot-content', isActive ? 'active-style' : '']">
      动态样式内容
    </view>
  </child-component>
</template>

<style>
.active-style {
  font-weight: bold;
  color: green;
}
</style>