uniapp 组件中如何使用componentplaceholder

在uniapp开发中，如何在组件内正确使用componentPlaceholder？我在官方文档中看到这个属性可以自定义占位组件，但实际测试时发现替换不生效。能否提供一个具体的使用示例，比如在自定义弹窗组件中替代默认的loading显示？需要说明在template中的写法以及必要的js配置。

2 回复

在uni-app中，使用componentplaceholder作为占位符，在组件加载前显示。例如：

<template>
  <view>
    <component is="dynamicComp">
      <componentplaceholder>加载中...</componentplaceholder>
    </component>
  </view>
</template>

当动态组件未加载完成时，会显示“加载中…”文本。适用于异步组件或动态组件切换场景。


在 UniApp 中，component-placeholder 是一个用于小程序端的特殊组件，主要用于占位自定义组件，在首次渲染时提升加载性能。它允许在小程序中使用自定义组件时，先用一个原生组件（如 view）临时渲染，待自定义组件准备好后再替换。

使用方法

  1. 在 pages.json 中配置：
    在页面的 style 中启用 componentPlaceholder，并指定占位组件。

    {
  "path": "pages/index/index",
  "style": {
    "usingComponents": {
      "custom-component": "/components/custom-component"
    },
    "componentPlaceholder": {
      "custom-component": "view" // 用 view 组件占位
    }
  }
}

  2. 在模板中使用：
    在页面中正常使用自定义组件，初始化时会自动用占位组件（如 view）渲染，加载完成后替换为实际组件。

    <template>
  <view>
    <custom-component :prop-data="data"></custom-component>
  </view>
</template>

注意事项

  • 仅限小程序端：H5 和 App 端不支持此功能。
  • 占位组件限制：只能使用小程序原生组件（如 view、text）。
  • 适用场景：适合复杂自定义组件，避免首次渲染白屏，提升用户体验。

示例说明

假设自定义组件 custom-component 加载较慢，配置后首次渲染会显示一个空的 view，加载完成后显示实际内容。无需额外代码，由小程序底层自动处理。

通过此配置，可优化页面加载性能，减少用户等待时间。

回到顶部