uniapp插槽的使用

uniapp插槽的基本概念

插槽（slot）是Vue组件化开发中的重要特性，允许父组件向子组件传递模板片段。在uniapp中，插槽的使用与Vue保持一致，分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽的使用

子组件中通过<slot>标签定义插槽位置：

<view class="child-component">
  <slot>这里是默认内容</slot>
</view>

父组件使用时直接填充内容：

<child-component>
  <text>这里会替换子组件的slot内容</text>
</child-component>

具名插槽的使用

子组件定义多个具名插槽：

<view class="child-component">
  <slot name="header"></slot>
  <slot name="content"></slot>
  <slot name="footer"></slot>
</view>

父组件通过v-slot指令指定插槽：

<child-component>
  <template v-slot:header>
    <text>头部内容</text>
  </template>
  <template v-slot:content>
    <text>主体内容</text>
  </template>
</child-component>

作用域插槽的使用

子组件通过插槽prop传递数据：

<view class="child-component">
  <slot name="item" v-for="item in list" :item="item"></slot>
</view>

父组件接收并使用数据：

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

动态插槽名

支持使用动态指令参数定义插槽名：

<child-component>
  <template v-slot:[dynamicSlotName]>
    <text>动态插槽内容</text>
  </template>
</child-component>

插槽的注意事项

uniapp的插槽编译会转换为小程序模板语法，部分复杂用法在小程序端可能受限。作用域插槽在小程序端需要使用scope替代slot-scope属性。

插槽内容在组件生命周期中属于父组件范畴，数据绑定和事件处理都发生在父组件上下文环境中。