<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>  
                                    - 发布:2021-08-30 17:54
 - 更新:2021-08-31 17:41
 - 阅读:678
 
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 11 家庭中文版 21H2
第三方开发者工具版本号: v2.19.1
基础库版本号: 2.10.1
项目创建方式: CLI
CLI版本号: ^2.0.0-32220210818002
示例代码:
                                    
                                    
                                         
                                
                                                                                                操作步骤:
                                    
                                        <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>
                                     
                                
                                                                                                <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语法失效,无法正确显示
            
            
            
            
1 个回复
4***@qq.com (作者) - 菜鸟
有大佬出来解忧吗