Nuxt 中有一些特殊的组件用法
异步组件
加 Lazy 前缀即可
<LazyMountainsList v-if="show" />
动态组件
方式一：使用 Vue 提供的 resolveComponent 函数
<script setup lang="ts">
const Demo1 = resolveComponent("Demo1");
const Demo2 = resolveComponent("Demo2");
const SomeComponent = ref(Demo1);function change() {SomeComponent.value = Demo2;
}
</script>
<template><div><button @click="change">切换到范例组件2</button><component :is="SomeComponent" /></div>
</template>
方式二：从 #components 中导入组件（会绕过 Nuxt 的自动导入功能）
<script setup lang="ts">
import { Demo1, Demo2 } from "#components";const SomeComponent = ref(Demo1);function change() {SomeComponent.value = Demo2;
}
</script>
<template><div><button @click="change">切换到范例组件2</button><component :is="SomeComponent" /></div>
</template>
客户端组件
仅在客户端渲染的组件
方式一：在组件名后添加 .client 后缀
Comments.client.vue
若显式导入这些组件（ 从 #components 导入除外），则仍是服务端渲染
.client 组件仅在挂载后才会渲染。要在 onMounted() 的回调中访问渲染的模板，请在 onMounted() 钩子的回调中添加 await nextTick()。
方式二：使用 Nuxt3 内置的 <ClientOnly> 组件
<ClientOnly><!-- 此组件仅在客户端渲染 --><Comments /></ClientOnly>
可按下方代码添加服务端渲染的内容 ( 如客户端完成渲染前，显示正在加载 )
<template><div><Sidebar /><!-- 这将在服务器端渲染 "span" 元素 --><ClientOnly fallbackTag="span"><!-- 此组件仅在客户端渲染 --><Comments /><template #fallback><!-- 这将在服务器端渲染 --><p>Loading comments...</p></template></ClientOnly></div>
</template>
#fallback 是插槽写法，也可用 fallback 属性
<template><div><Sidebar /><ClientOnly fallback-tag="span" fallback="加载评论中..."><Comment /></ClientOnly></div>
</template>
内置组件
<NuxtLayout>
用于渲染对应的布局，默认加载 default 布局
- name 属性可指定需加载的布局
<NuxtLayout name="custom"><NuxtPage /></NuxtLayout>
- 获取布局组件的 ref，需通过 ref.value.layoutRef
<script setup lang="ts">
const layout = ref()function logFoo () {layout.value.layoutRef.foo()
}
</script><template><NuxtLayout ref="layout" />
</template>
- 可向下传递自定义属性
<NuxtLayout name="custom" title="我是一个自定义布局"><-- ... --></NuxtLayout>
具体页面的模板中可以通过 $attrs.title 获取，JS 中可通过 useAttrs().title 获取
- 为了达到预期的过渡效果，建议
<NuxtLayout />不是页面组件的根元素
<template><div><NuxtLayout name="custom"><template #header> 页面头部模板内容。 </template></NuxtLayout></div>
</template>
