<ClientOnly>
使用 <ClientOnly> 组件仅在客户端渲染组件。
<ClientOnly>
组件用于专门只在客户端渲染某个组件。
默认插槽的内容会在服务端构建时被树摇(tree-shaken)移除。(这意味着插槽内组件所使用的任何 CSS 可能不会在初始 HTML 渲染时内联。)
Props
placeholderTag
|fallbackTag
:指定服务端渲染时渲染的标签。placeholder
|fallback
:指定服务端渲染时渲染的内容。
<template>
<div>
<Sidebar />
<!-- <Comment> 组件仅会在客户端渲染 -->
<ClientOnly fallback-tag="span" fallback="加载评论中...">
<Comment />
</ClientOnly>
</div>
</template>
插槽
#fallback
:指定在服务端渲染并在浏览器中<ClientOnly>
挂载前显示的内容。
pages/example.vue
<template>
<div>
<Sidebar />
<!-- 这会在服务端渲染 "span" 元素 -->
<ClientOnly fallbackTag="span">
<!-- 该组件仅会在客户端渲染 -->
<Comments />
<template #fallback>
<!-- 这会在服务端渲染 -->
<p>加载评论中...</p>
</template>
</ClientOnly>
</div>
</template>
示例
获取 HTML 元素访问权限
<ClientOnly>
中的组件只有在挂载后才会渲染。要访问 DOM 中渲染的元素,可以监听模板引用:
pages/example.vue
<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
// 组件可用时监听会被触发
watch(nuxtWelcomeRef, () => {
console.log('<NuxtWelcome /> 已挂载')
}, { once: true })
</script>
<template>
<ClientOnly>
<NuxtWelcome ref="nuxtWelcomeRef" />
</ClientOnly>
</template>