uniapp 插槽使用

uniapp 插槽的基本使用

在 uniapp 中，插槽（slot）是组件化开发的重要特性，允许父组件向子组件传递内容。插槽分为默认插槽和具名插槽。

子组件定义插槽：

<template>
  <view>
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name="header"></slot>
  </view>
</template>

父组件使用插槽：

<template>
  <child-component>
    <!-- 默认插槽内容 -->
    <text>默认插槽内容</text>

    <!-- 具名插槽内容 -->
    <text slot="header">头部内容</text>
  </child-component>
</template>

作用域插槽的使用

作用域插槽允许子组件向父组件传递数据，父组件可以自定义渲染逻辑。

子组件定义作用域插槽：

<template>
  <view>
    <slot :item="itemData" name="item"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemData: { name: '示例数据' }
    }
  }
}
</script>

父组件使用作用域插槽：

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

动态插槽名

动态插槽名允许通过变量动态指定插槽名称。

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

<template>
  <view>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </view>
</template>

父组件动态绑定插槽名：

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

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    }
  }
}
</script>

插槽的默认内容

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

子组件设置默认内容：

<template>
  <view>
    <slot>
      <text>默认显示的文本</text>
    </slot>
  </view>
</template>

注意事项

• 插槽内容在父组件中编译，作用域属于父组件。
• 作用域插槽的数据传递是单向的，父组件不能直接修改子组件传递的数据。
• 动态插槽名需确保绑定的变量值是字符串类型。