3***@qq.com
3***@qq.com
  • 发布:2021-06-29 14:14
  • 更新:2021-07-07 20:18
  • 阅读:918

【报Bug】使用了作用域插槽的组件,放在另外一个组件的slot里出现的问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: Alpha

HBuilderX版本号: 3.1.21

第三方开发者工具版本号: 1.05.2105170

基础库版本号: 2.17.3

项目创建方式: HBuilderX

示例代码:

// /components/test/test.vue,使用了作用域插槽

<template>  
  <view>  
    <slot name="list" :slotList="list"></slot>  
  </view>  
</template>  

<script>  
export default {  
  name:"test",  
  props: {  
    list: {  
      type: Array  
    }  
  },  
  data() {  
    return {  

    }  
  }  
}  
</script>

// /components/other/other.vue,普通组件

<template>  
  <view><slot></slot></view>  
</template>  

<script>  
export default {  
  name: 'other',  
  data() {  
    return {}  
  }  
}  
</script>

// /pages/test/test.vue,测试页面

<template>  
  <view>  
    <!-- 放在外层的test组件 -->  
    <test :list="[1, 2, 3, 4, 5, 6]">  
      <template #list="{ slotList }">  
        <view v-for="(item, index) in slotList" :key="index" @click="test">{{ item }}</view>  
      </template>  
    </test>  
    <!-- 放在另外一个组件的slot中的test组件 -->  
    <other>  
      <test :list="[11, 22, 33, 44, 55, 66]">  
        <template #list="{ slotList }">  
          <view v-for="(item, index) in slotList" :key="index" @click="test">{{ item }}</view>  
        </template>  
      </test>  
    </other>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {}  
  },  
  methods: {  
    test() {  
      console.log('test')  
    }  
  }  
}  
</script>

操作步骤:

运行示例代码

预期结果:

2个test组件均能正常解析

实际结果:

只有第1个test正常解析,第2个test未显示出来,将第2个test中的@click事件取消,则正常显示出来了。

bug描述:

如下示例代码,测试页面中,一个test组件放在根下,另一个test组件放在other组件中,第一个test正常显示了内容,第二个test未显示,将第二个test中的@click取消,则正常显示。以上是微信小程序测试结果,H5中都正常显示出来了。

2021-06-29 14:14 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

问题已确认,已加分,后续会优化。

临时解决方案:
manifest.json中配置如下:
scopedSlotsCompiler:legacy 详情

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 3.1.22+ 已修复

该问题目前已经被锁定, 无法添加新回复