uniapp 微信小程序作用域插槽的使用方法

在uniapp开发微信小程序时，如何使用作用域插槽？官方文档中对slot-scope的示例较少，尝试在自定义组件中传递数据到插槽时遇到作用域不生效的问题。具体表现为父组件无法接收到子组件通过v-bind传递的参数，求正确的实现方法和常见错误排查思路。是否需要特殊配置才能在小程序环境使用作用域插槽？

2 回复

在uni-app微信小程序中，使用作用域插槽需在子组件中通过slot标签传递数据，父组件用slot-scope接收。例如：

子组件：

<slot :data="item"></slot>

父组件：

<child>
  <template slot-scope="props">
    <text>{{ props.data }}</text>
  </template>
</child>

注意：微信小程序需基础库2.7.1+支持。


在 UniApp 中使用微信小程序的作用域插槽（scoped slot），主要通过 <slot> 的 name 和 props 属性实现数据传递。以下是具体使用方法：

1. 定义作用域插槽（父组件）

在父组件中，使用 <slot> 并绑定数据到自定义属性（如 data），通过 name 指定插槽名称：

<child-component>
  <template v-slot:default="slotProps">
    <view>接收子组件数据：{{ slotProps.data }}</view>
  </template>
</child-component>

2. 子组件配置插槽

子组件通过 <slot> 的 name 和 :data 传递数据：

<view>
  <slot :data="childData"></slot>
</view>

export default {
  data() {
    return {
      childData: '来自子组件的数据'
    }
  }
}

3. 具名作用域插槽

若需多个插槽，使用 name 区分：

<!-- 父组件 -->
<child-component>
  <template v-slot:header="props">
    <text>{{ props.title }}</text>
  </template>
  <template v-slot:footer="props">
    <text>{{ props.text }}</text>
  </template>
</child-component>

<!-- 子组件 -->
<view>
  <slot name="header" :title="headerTitle"></slot>
  <slot name="footer" :text="footerText"></slot>
</view>

注意事项：

  • 微信小程序基础库需 2.6.0+ 支持作用域插槽
  • UniApp 中语法与 Vue 一致，编译后转为小程序模板
  • 仅支持默认插槽和具名插槽，不支持动态插槽名

通过作用域插槽，父组件可获取子组件数据，实现灵活的内容定制。

回到顶部