ClientOnly

使用<ClientOnly>组件只在客户端渲染组件。

<ClientOnly>组件只在客户端渲染其插槽内容。要仅在客户端导入组件，请在仅客户端的插件中注册组件。

Props

placeholderTag | fallbackTag: 指定在服务器端渲染的标签。
placeholder | fallback: 指定在服务器端渲染的内容。

html

<template>
  <div>
    <Sidebar />
    <ClientOnly fallback-tag="span" fallback="加载评论中...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

#fallback: 指定在服务器端显示的内容。

html

<template>
  <div>
    <Sidebar />
    <ClientOnly>
      <!-- ... -->
      <template #fallback>
        <!-- 这将在服务器端渲染 -->
        <p>加载评论中...</p>
      </template>
    </ClientOnly>
  </div>
</template>