uni-app 微信小程序中 slot name 无法使用 kebab case 命名方式

uni-app 微信小程序中 slot name 无法使用 kebab case 命名方式

9 回复

确实，我也遇到了。

更多关于uni-app 微信小程序中 slot name 无法使用 kebab case 命名方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


@DCloud前端团队 @DCloud_UNI_GSQ

vue 的示例代码补充一下

<slot name="left-icon"> <view>默认内容</view> </slot>

<template #left-icon> <view>11111</view> </template>

写了个简单的demo，实际上是个默认插槽，默认为一个自定义的图标，代码太多了就不贴了

导致错误原因应该是语法错误 $slots.left-icon 不能被解析

回复 s***@163.com: 好的，后续将进行排查

在 uni-app 的微信小程序中，确实存在 slot 的 name 属性不支持 kebab-case（短横线分隔命名）的问题。这是由于微信小程序原生不支持这种命名方式，而 uni-app 在编译到微信小程序平台时，会遵循其底层限制。

原因分析： 微信小程序原生的 slot 定义仅支持小写字母、数字、下划线（_）和美元符号（$），且不能以数字开头。kebab-case（如 slot-name）在编译时可能被转换为不兼容的格式，导致无法正确匹配。

解决方案：

  1. 改用 camelCase（驼峰命名）：将 name 统一改为驼峰式（如 slotName），这是最稳定的跨平台兼容方案。
    <!-- 子组件 -->
<slot name="headerSlot"></slot>

<!-- 父组件 -->
<view slot="headerSlot">内容</view>
回到顶部