uniapp 小程序中插槽如何使用

在uniapp开发小程序时，如何使用插槽功能？我在组件中定义了slot，但父组件传入的内容无法正常显示。是否需要在子组件中添加特殊配置？另外，小程序环境下的插槽和普通vue项目中的使用方式有什么区别？求具体示例代码和解决方案。

2 回复

在uniapp小程序中使用插槽，只需在子组件中定义<slot>标签，父组件中传入内容即可。支持默认插槽和具名插槽，用法与Vue相同。例如子组件写<slot name="header"></slot>，父组件用<template v-slot:header>内容</template>。


在 UniApp 小程序中，插槽（Slot）用于实现组件内容的灵活分发，类似于 Vue.js 的插槽机制。以下是插槽的使用方法：

1. 默认插槽

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

子组件（child.vue）：

<template>
  <view>
    <text>子组件内容</text>
    <slot></slot> <!-- 默认插槽位置 -->
  </view>
</template>

父组件使用：

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

2. 具名插槽

通过 name 属性定义多个插槽，父组件使用 v-slot 或 slot 属性指定插入位置。

子组件（child.vue）：

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

父组件使用（Vue 2 语法）：

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

Vue 3 语法（需使用 v-slot）：

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

3. 作用域插槽

子组件通过插槽传递数据给父组件，父组件可接收并使用这些数据。

子组件（child.vue）：

<template>
  <view>
    <slot :user="userData"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userData: { name: "张三", age: 20 }
    };
  }
};
</script>

父组件使用：

<template>
  <child>
    <template v-slot="slotProps">
      <text>姓名：{{ slotProps.user.name }}, 年龄：{{ slotProps.user.age }}</text>
    </template>
  </child>
</template>

注意事项：

  • UniApp 默认支持 Vue 2 语法，若使用 Vue 3 需在项目配置中启用。
  • 小程序端部分进阶插槽功能可能受限，建议测试目标平台兼容性。
  • 作用域插槽在复杂场景中需确保数据传递正确。

通过以上方法，可以灵活使用插槽增强组件的可复用性。

回到顶部