uni-app 微信小程序 自定义组件传入多个 Unicode 形式的uni-icons 小程序报错

uni-app 微信小程序 自定义组件传入多个 Unicode 形式的uni-icons 小程序报错

信息类别 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 版本号 22H2 操作系统内部版本19045.2006
第三方开发者工具版本号 1.06.2504010win32-x64
基础库版本号 WeChatLib: 3.8.9 (2025.6.17 19:09:25)
项目创建方式 CLI
CLI版本号 “@dcloudio/uni-cli-shared”: “3.0.0-4060620250520001”

示例代码：

//父组件  
<custom-card :title="i.collectContent">  
            <template #title-icon>  
              <view class="slot-icon">  
                <uni-icons fontFamily="CustomFont" color="#1772F6" size="14">  
                  {{ "\ue60b" }}  
                </uni-icons>  
              </view>  
            </template>  
            <template #foot-left>  
              <text>订阅日期：{{ i.createTime }}</text>  
            </template>  
            <template #foot-right>  
              <uni-icons fontFamily="CustomFont" color="#1772F6" size="14">  
                {{ "\ue606" }}  
              </uni-icons>  
            </template>  
          </custom-card>  

//custom-card  
<template>  
  <view class="my-card">  
    <view class="my-card-title">  
      <slot name="title-icon"></slot>  
      <view class="my-card-title-text">{{ title }}</view>  
    </view>  
    <view class="my-card-content">{{ content }}</view>  
    <view class="my-card-foot">  
      <view class="my-card-foot-left">  
        <slot name="foot-left"></slot>  
      </view>  
      <view class="my-card-foot-right">  
        <slot name="foot-right"></slot>  
      </view>  
    </view>  
  </view>  
</template>

操作步骤：

//父组件  
<custom-card :title="i.collectContent">  
            <template #title-icon>  
              <view class="slot-icon">  
                <uni-icons fontFamily="CustomFont" color="#1772F6" size="14">  
                  {{ "\ue60b" }}  
                </uni-icons>  
              </view>  
            </template>  
            <template #foot-left>  
              <text>订阅日期：{{ i.createTime }}</text>  
            </template>  
            <template #foot-right>  
              <uni-icons fontFamily="CustomFont" color="#1772F6" size="14">  
                {{ "\ue606" }}  
              </uni-icons>  
            </template>  
          </custom-card>  

//custom-card  
<template>  
  <view class="my-card">  
    <view class="my-card-title">  
      <slot name="title-icon"></slot>  
      <view class="my-card-title-text">{{ title }}</view>  
    </view>  
    <view class="my-card-content">{{ content }}</view>  
    <view class="my-card-foot">  
      <view class="my-card-foot-left">  
        <slot name="foot-left"></slot>  
      </view>  
      <view class="my-card-foot-right">  
        <slot name="foot-right"></slot>  
      </view>  
    </view>  
  </view>  
</template>

预期结果：

可以正常显示图标

实际结果：

无法显示第二个图标

bug描述：

自定义组件，通过slot传入插槽，当插槽为unicode 形式的 uni-icons时，并且数量大于1，小程序报错

更多关于uni-app 微信小程序 自定义组件传入多个 Unicode 形式的uni-icons 小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好，可以提供一下一个完整的可以运行并复现的项目吗？

更多关于uni-app 微信小程序 自定义组件传入多个 Unicode 形式的uni-icons 小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于微信小程序平台对自定义组件插槽中嵌套组件的限制导致的。当在自定义组件的多个插槽中都使用 uni-icons 组件时，微信小程序的渲染机制会出现冲突。

解决方案：

  1. 使用条件渲染：为每个插槽的 uni-icons 添加不同的 key 属性
<template #title-icon>
  <view class="slot-icon">
    <uni-icons key="title-icon" fontFamily="CustomFont" color="#1772F6" size="14">
      {{ "\ue60b" }}
    </uni-icons>
  </view>
</template>

<template #foot-right>
  <uni-icons key="foot-icon" fontFamily="CustomFont" color="#1772F6" size="14">
    {{ "\ue606" }}
  </uni-icons>
</template>
  1. 改用 Props 传递：修改自定义组件，通过 props 传递图标信息
<!-- 父组件 -->
<custom-card 
  :title="i.collectContent"
  :title-icon="'\ue60b'"
  :foot-icon="'\ue606'"
>
  <template #foot-left>
    <text>订阅日期：{{ i.createTime }}</text>
  </template>
</custom-card>

<!-- custom-card 组件 -->
<view class="my-card-title">
  <uni-icons fontFamily="CustomFont" color="#1772F6" size="14">
    {{ titleIcon }}
  </uni-icons>
  <view class="my-card-title-text">{{ title }}</view>
</view>
回到顶部