uniapp插槽的使用

uniapp插槽的基本概念

插槽（Slot）是组件化开发中的重要特性，允许在组件内部预留位置，由父组件动态传入内容。uniapp支持Vue的插槽语法，分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽使用

在子组件中通过<slot>标签定义插槽位置，父组件传入的内容会替换该标签。

子组件示例代码：

<view class="child-component">
  <slot></slot>
</view>

父组件调用示例：

<child-component>
  <text>这是插入到默认插槽的内容</text>
</child-component>

具名插槽使用

当需要多个插槽时，可使用具名插槽。子组件通过name属性命名插槽，父组件通过v-slot指令或slot属性指定内容。

子组件示例：

<view>
  <slot name="header"></slot>
  <view>主体内容</view>
  <slot name="footer"></slot>
</view>

父组件调用方式（Vue 2.6+推荐写法）：

<child-component>
  <template v-slot:header>
    <text>头部内容</text>
  </template>
  <template v-slot:footer>
    <text>底部内容</text>
  </template>
</child-component>

兼容写法（旧版本）：

<child-component>
  <view slot="header">头部内容</view>
  <view slot="footer">底部内容</view>
</child-component>

作用域插槽使用

当子组件需要向插槽传递数据时，可使用作用域插槽。子组件通过v-bind绑定数据，父组件通过v-slot接收。

子组件示例：

<view>
  <slot name="item" v-bind:item="itemData"></slot>
</view>

父组件调用示例：

<child-component>
  <template v-slot:item="slotProps">
    <text>{{ slotProps.item.name }}</text>
  </template>
</child-component>

插槽默认内容

可以为插槽设置默认内容，当父组件未提供插槽内容时显示。

示例代码：

<slot>默认显示内容</slot>

动态插槽名

支持使用动态指令参数指定插槽名称。

示例代码：

<template v-slot:[dynamicSlotName]>
  ...
</template>

注意事项

1. 在非H5端，具名插槽的旧写法（slot="name"）需要编译到HBuilderX 2.4.1以上版本
2. 作用域插槽在微信小程序中需要基础库2.5.0+支持
3. 动态插槽名在部分平台可能需要额外配置
4. 插槽样式建议写在父组件中，避免样式隔离问题