uniapp 小程序slot传参的使用方法

在uniapp开发小程序时，如何使用slot传参？我尝试在子组件中定义slot并通过props传递参数，但父组件中无法正确接收到数据。具体应该怎么在slot中传递参数，并确保父组件能正常使用这些参数？官方文档中的例子比较简单，希望能看到更详细的使用场景和代码示例。

2 回复

在uniapp小程序中，使用slot传参需结合作用域插槽。父组件通过v-slot接收子组件传递的参数。例如：

子组件：

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

父组件：

<template v-slot:content="slotProps">
  <text>{{ slotProps.data }}</text>
</template>

这样即可实现slot参数传递。


在 UniApp 小程序中，slot（插槽） 用于组件间内容分发，但不直接支持传参（类似 Vue 的作用域插槽）。若需传递数据，可通过以下方法实现：

方法一：通过事件传递参数（推荐）

  1. 父组件：使用 slot 并监听子组件触发的事件。
  2. 子组件：在 slot 位置触发事件，将参数传递给父组件。

示例代码：

  • 子组件（child.vue）：

    <template>
  <view>
    <slot name="custom"></slot>
    <button @click="sendData">传递数据</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('getData', { message: '来自子组件的数据' });
    }
  }
}
</script>

  • 父组件：

    <template>
  <child @getData="handleData">
    <template v-slot:custom>
      <text>插槽内容</text>
    </template>
  </child>
</template>

<script>
import child from '@/components/child.vue';
export default {
  components: { child },
  methods: {
    handleData(data) {
      console.log(data.message); // 输出：来自子组件的数据
    }
  }
}
</script>

方法二：利用 Props 间接传参

  1. 在子组件中通过 props 接收父组件数据。
  2. 将数据用于 slot 内部的逻辑（需结合组件属性传递）。

适用场景：数据在父组件中定义，子组件仅展示。

注意事项

  • UniApp 基于 Vue 2，小程序环境不支持 Vue 3 的作用域插槽。
  • 复杂数据传递建议结合 Vuex 或全局事件总线。

通过以上方法，可灵活实现 slot 的数据交互。

回到顶部