uni-app nvue vue-cli 创建的工程，具名插槽不支持 <template #footer> 这种写法，编译报错

uni-app nvue vue-cli 创建的工程，具名插槽不支持 <template #footer> 这种写法，编译报错

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 macOS Big Sur 11.2.3
手机系统 Android
手机版本号 Android 11
手机厂商 小米
手机机型 MI 8
页面类型 nvue
打包方式 云端
项目创建方式 CLI
CLI版本号 2.0.0-31920210709003

示例代码：

<template>  
  <uni-list>  
    <uni-list-item title="自定义右侧插槽" note="列表描述信息" link>  
      <template #header>  
        <text>测试</text>  
      </template>  
    </uni-list-item>  
  </uni-list>  
</template>

操作步骤：

  • 编译报错

预期结果：

  • 编译正常

实际结果：

  • 编译报错

bug描述： uni 的 templateLoader 解析异常


更多关于uni-app nvue vue-cli 创建的工程，具名插槽不支持 <template #footer> 这种写法，编译报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue vue-cli 创建的工程，具名插槽不支持 <template #footer> 这种写法，编译报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，使用 Vue CLI 创建的项目确实存在对具名插槽 <template #footer> 这种简写语法支持不完善的问题。这是由于 nvue 页面的编译工具链与常规 Vue 页面不同，部分 Vue 2.x 的高级语法在 nvue 中可能无法正常解析。

解决方案： 请改用完整的 slot 属性写法替代简写语法。将：

<template #header>
  <text>测试</text>
</template>

修改为：

<template slot="header">
  <text>测试</text>
</template>
回到顶部