uni-app 插槽传递的数据无法传递到函数中

uni-app 插槽传递的数据无法传递到函数中

示例代码：

<template #bottom="{ rangeData }">  
  <view class="px-20px py-15px text-14px f-space-between">  
    <view class="font-semibold">排班任务</view>  
    <view  
      class="flex flex-1 items-center justify-end text-jr-remark"  
      @click="selectTaskTemplate"  
      >{{ taskSourceType.name || '请选择任务' }}  
      <jr-icon  
        color="var(--jr-text-remark)"  
        name="arrow-right"  
      ></jr-icon>  
    </view>  
  </view>  
  <view class="mt-15px box-border w-full px-20px f-space-between">  
    <view  
      class="mr-15px h-40px flex-1 rounded-full !text-14px jr-btn-cancel"  
      @click.stop="showRangePopup = false"  
      >收起  
    </view>  
    <view  
      class="h-40px flex-1 rounded-full !text-14px jr-btn-primary"  
      @click.stop="confirmSetTimeRange(rangeData)"  
      >提交  
    </view>  
  </view>  
</template>

操作步骤：

  • 通过插槽传递数据出来
  • 渲染是可以使用的
  • 点击提交报错

预期结果：

点击提交正常传递rangeData

实际结果：

rangeData 不存在，报错

bug描述：

插槽传递的数据无法传递到函数中

cli版本2.0.2-alpha-4080220250929001

信息类型 信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX版本 4.82
第三方开发者工具 2.012509282
基础库版本 3.8.10
项目创建方式 CLI
CLI版本 2.0.2-alpha-4080220250929001

更多关于uni-app 插槽传递的数据无法传递到函数中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

官方有么有人

更多关于uni-app 插槽传递的数据无法传递到函数中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


发个完整的demo，记得精简代码和脱敏

目前实在没时间提供demo，排查发现是渲染了taskSourceType.name导致的，如果渲染了data定义的数据，不会生成插槽对应的组件，很奇怪，删除掉之后就能正常生成了，以前没出现过这种情况

暂时将需要渲染data中的数据的地方放到另外的插槽里解决了

在uni-app中，插槽传递的数据在模板渲染时可以直接使用，但在方法调用时需要通过函数参数显式传递。

问题在于你的confirmSetTimeRange函数调用时没有接收到rangeData参数。虽然模板中能渲染rangeData，但在点击事件中需要显式传递：

<view 
  class="h-40px flex-1 rounded-full !text-14px jr-btn-primary"
  @click.stop="confirmSetTimeRange(rangeData)"
>提交</view>

确保confirmSetTimeRange方法在methods中正确定义：

methods: {
  confirmSetTimeRange(rangeData) {
    console.log('接收到的数据:', rangeData)
    // 处理rangeData逻辑
  }
}

如果仍然报错，检查插槽数据源组件是否正确传递了rangeData。在父组件中确认插槽作用域数据是否正常提供：

<your-component>
  <template #bottom="{ rangeData }">
    <!-- 确保rangeData在这里有值 -->
    {{ rangeData }}
  </template>
</your-component>
回到顶部