4***@qq.com
4***@qq.com
  • 发布:2021-08-30 17:54
  • 更新:2021-08-31 17:41
  • 阅读:551

【报Bug】使用动态插槽时,在template中使用计算属性传参,会导致插槽不显示

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭中文版 21H2

第三方开发者工具版本号: v2.19.1

基础库版本号: 2.10.1

项目创建方式: CLI

CLI版本号: ^2.0.0-32220210818002

示例代码:
<template>  
  <view>  
    <view v-for="(item, index) in list" :key="index">  
      <!-- #ifdef H5 || APP-PLUS -->  
      <slot :name="item.id"></slot>  
      <!-- #endif -->  
      <!-- #ifdef MP -->  
      <slot name="{{item.id}}"></slot>  
      <!-- #endif -->  
      <!-- 下面这句代码注释掉就可以正常用v-slot语法 ,-->  
      <view>{{ cmtTest(item) }}</view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  props: {  
    list: {  
      type: Array,  
      default() {  
        return {};  
      }  
    }  
  },  
  data() {  
    return {  
      value: "测试"  
    };  
  },  
  computed: {  
    // 给测试加个id  
    cmtTest() {  
      return item => {  
        let val = this.value + "--" + item.id;  
        return val;  
      };  
    }  
  }  
};  
</script>  

<style></style>  

操作步骤:
<template>    
  <view>    
   <test :list="navData">  
      <template v-slot:a>  
        slot---aaa  
      </template>  
      <template v-slot:b>  
        slot---bbb  
      </template>  
    </test>  
  </view>    
</template>    

<script>    
import test from '../test/test.vue'    
export default {    
  components: {    
    test    
  },    
  data () {    
    return {    
      navData: [    
       {  
          id: "a"  
        },  
        {  
          id: "b"  
        }  
      ]    
    }    
  },    
}    
</script>

预期结果:

当在模板语法中用到计算属性传参或者过滤器传参不影响了插槽语法

实际结果:

当在模板语法中用到计算属性传参或者过滤器传参影响了插槽语法

bug描述:

在微信小程序中,当在模板语法中用了计算属性传参或者方法传参或者过滤器传参时,v-slot语法失效,无法正确显示

2021-08-30 17:54 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com (作者) - 菜鸟

有大佬出来解忧吗

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