在uni-app作用域插槽内执行函数会报错

在uni-app作用域插槽内执行函数会报错

开发环境 版本号 项目创建方式
Windows 1 HBuilderX
HBuilderX 4.75
第三方开发者工具 1.06.2412050
基础库 3.8.0

示例代码：

<comp>  
    <template #test="{data}">  
        {{[1,2,3].join(',')}}  
    </template>  
</comp>

操作步骤：

  • 在作用域插槽内执行任何函数，包括js原生函数会报错

预期结果：

  • 不报错

实际结果：

  • 报错

bug描述：

  • 在作用域插槽内执行任何函数，包括js原生函数会报错。比如代码示例中在comp组件内的test插槽中执行数组的join方法会报错

更多关于在uni-app作用域插槽内执行函数会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

测试一下原生微信是否支持这种写法

更多关于在uni-app作用域插槽内执行函数会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的作用域插槽中直接调用函数确实可能遇到问题，这是因为uni-app在编译时对模板表达式的处理限制。问题通常出现在模板编译阶段，uni-app的模板编译器可能无法正确解析某些函数调用表达式。

解决方案：

  1. 使用计算属性替代直接函数调用
computed: {
  joinedArray() {
    return [1,2,3].join(',')
  }
}

模板中改为：

<comp>  
    <template #test="{data}">  
        {{joinedArray}}  
    </template>  
</comp>
  1. 通过方法包装函数调用
methods: {
  joinArray(arr) {
    return arr.join(',')
  }
}

模板中改为：

<comp>  
    <template #test="{data}">  
        {{joinArray([1,2,3])}}  
    </template>  
</comp>
回到顶部