【Nuxt3】内置组件介绍

2024-04-08 05:20
文章标签 组件 介绍 内置 nuxt3

本文主要是介绍【Nuxt3】内置组件介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简言

介绍下nuxt3的内置组件用法。

ClientOnly

使用 <ClientOnly> 组件仅在客户端渲染组件。
属性：

  • placeholderTag | fallbackTag — 指定要在服务器端呈现的标记。
  • placeholder | fallback — 指定要在服务器端渲染的内容，并在浏览器挂载 <ClientOnly> 之前显示。

示例：

<template><div><Sidebar /><!-- This renders the "span" element on the server side --><ClientOnly fallbackTag="span"><!-- this component will only be rendered on client side --><Comments /><template #fallback><!-- this will be rendered on server side --><p>Loading comments...</p></template></ClientOnly></div>
</template>

DevOnly

使用 <DevOnly> 组件，仅在开发过程中渲染组件。
Nuxt 提供了 <DevOnly> 组件，用于仅在开发过程中呈现组件。

这些内容不会包含在生产构建中，它有一个fallback插槽可以用于在生产环境替换devOnly的内容。

这在开发时显示辅助开发工具比较有用

<template><div><Sidebar /><DevOnly><!-- this component will only be rendered during development --><LazyDebugBar /><!-- be sure to test these using `nuxt preview` --><template #fallback><div><!-- empty div for flex.justify-between --></div></template></DevOnly></div>
</template>

NuxtClientFallback

Nuxt 提供了 <NuxtClientFallback> 组件，用于在其任何子组件触发 SSR 中的错误时在客户端呈现其内容。

这个是实验性的，需要在nuxt.config.ts配置才可开启

export default defineNuxtConfig({experimental: {clientFallback: true}
})

slots

#fallback：指定插槽渲染失败时在服务器端显示的内容。

示例

  <template><!-- render <span>Hello world</span> server-side if the default slot fails to render --><NuxtClientFallback fallback-tag="span" fallback="Hello world"><BrokeInSsr /></NuxtClientFallback></template>

NuxtPage

需要使用 <NuxtPage> 组件来显示位于 pages/ 目录中的页面。
NuxtPage 是 Nuxt 的内置组件。它允许你显示位于 pages/ 目录中的顶层或嵌套页面。

它相当于vue-router的routerview，并且接收相同的name和route属性

属性

  • name — 会告诉 RouterView 渲染匹配路由记录组件选项中对应名称的组件。
  • route — 已解决所有组件的路由位置。
  • pageKey — 渲染 NuxtPage 组件的key。
  • transition — 为使用 NuxtPage 组件渲染的所有页面定义全局过渡效果。
  • keepalive — 控制使用 NuxtPage 组件渲染的页面的状态保存。

Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件，自动解析名称和路由。

示例

一般情况直接使用<NuxtPage />就好。

<template><div><NuxtPage /></div>
</template>
<script lang="ts" setup></script>

NuxtLayout

用于在页面使用layouts目录下的布局。
<NuxtLayout /> 通过 <slot /> 渲染传入内容，然后将其包裹在 Vue 的 <Transition /> 组件周围，以激活布局转换。为使其达到预期效果，建议 <NuxtLayout /> 不是页面组件的根元素。

<template>
<div><NuxtLayout>some page content</NuxtLayout></div>
</template>

默认情况下，他使用的是layouts目录下的default布局。

属性

  • name — 指定要渲染的布局名称，可以是字符串、反应式引用或计算属性。该名称必须与 layouts/ 目录中相应布局文件的名称一致。

示例

default布局

<template><div class="default"><div><h1>这是default布局</h1></div><slot /><slot name="footer"></slot></div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
</script>
<style lang="scss" scoped></style>

使用：

<template><div><NuxtLoadingIndicator color="green" /><NuxtLayout><NuxtPage /><template #footer><div>底部内容</div></template></NuxtLayout></div>
</template>
<script lang="ts" setup></script>

在这里插入图片描述

NuxtLink

Nuxt 提供了 <NuxtLink> 组件，用于处理应用程序中的各种链接。

是 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标记的直接替代品。它能智能判断链接是内部链接还是外部链接，并通过可用的优化（预取、默认属性等）进行相应的渲染。

属性

在不使用外部链接时，<NuxtLink> 支持所有 Vue 路由器的 RouterLink 属性：

  • to — 任何 URL 或 Vue 路由器中的路由位置对象。
  • custom — 自定义导航工作方式，与vue-router的custom属性相同。
  • exactActiveClass ： 指定点击后的类样式。其作用与 Vue 路由器的 exact-active-class prop 在内部链接上的作用相同。默认为 Vue 路由器的默认 “router-link-exact-active”）。
  • replace — 与 Vue Router 在内部链接上的replace属性功能相同。
  • ariaCurrentValue — 与 Vue Router 的 aria-current-value prop 在内部链接上的作用相同.
  • activeClass — 其作用与 Vue Router 的 active-class prop 在内部链接上的作用相同。默认值为 Vue 路由器的默认值（"router-link-active）。
  • href — to 的别名。如果与 to 一起使用，href 将被忽略。
  • noRel — 如果设置为 true，则不会在链接中添加 rel 属性。
  • external — 强制链接以 a 标记而不是 Vue Router RouterLink 的形式呈现。
  • prefetch — 启用后，将预取视口中链接的中间件、布局和有效载荷（使用 payloadExtraction 时）。由实验性的 crossOriginPrefetch 配置使用。
  • noPrefetch — 禁用预取。
  • prefetchedClass — 用于预取链接的类。
  • target — 应用于链接的目标属性值。
  • rel — 用于链接的 rel 属性值。外部链接默认为 “noopener noreferrer”。

示例

<template><NuxtLink to="https://twitter.com/nuxt_js" target="_blank">Nuxt Twitter</NuxtLink><!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> --><NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">Nuxt Discord</NuxtLink><!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> --><NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink><!-- <a href="https://github.com/nuxt">...</a> --><NuxtLink to="/contact" target="_blank">Contact page opens in another tab</NuxtLink><!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

NuxtLoadingIndicator

在页面导航之间显示进度条。

属性

  • color — 加载条的颜色。可将其设置为 false，以关闭明确的颜色样式。
  • height — 加载条高度，默认3px。
  • duration — 加载条的持续时间，毫秒（默认为 2000）。
  • throttle — 限制出现和隐藏的时间，毫秒数（默认 200）。
  • estimatedProgress — 默认情况下，Nuxt 会在接近 100% 时退出。你可以提供一个自定义函数来自定义进度估算，这是一个接收加载条（上图）持续时间和已用时间的函数。它应该返回一个介于 0 和 100 之间的值。

您可以使用 useLoadingIndicator 可组合挂钩到底层指标实例，这样就可以自己触发开始/结束事件。

示例

    <NuxtLoadingIndicator color="green" />

NuxtErrorBoundary

<NuxtErrorBoundary> 组件处理在其默认槽中发生的客户端错误。

slots

#error：指定出错时要显示的后备内容。

示例

  <template><NuxtErrorBoundary><!-- ... --><template #error="{ error }"><p>An error occurred: {{ error }}</p></template></NuxtErrorBoundary></template>

NuxtWelcome

<NuxtWelcome> 组件用于在使用启动模板制作的新项目中向用户致意。
它包括 Nuxt 文档、源代码和社交媒体账户的链接。

没屁用

示例

<template><NuxtWelcome />
</template>

NuxtIsland

Nuxt 提供了 <NuxtIsland> 组件，用于呈现非交互式组件，无需任何客户端 JS。
在渲染island组件时，island组件的内容是静态的，因此客户端无需下载 JS。
更改island组件道具会触发island组件的重新获取，从而再次重新渲染。

仅服务器组件在引擎盖下使用 <NuxtIsland>

这是一个提高性能的组件，如果你的组件内容只需要在服务端加载运行一次就行，然后在客户端只显示，不做后续交互，即可使用它。

它是实验性的组件 ,需要以下配置

// nuxt.config.ts
export default defineNuxtConfig({experimental: {componentIslands: true}
})

属性

  • name — 要渲染的组件名称。
  • lazy — 使组件不阻塞。
  • props — 要发送给组件进行渲染的属性。
  • source — 调用island 渲染的远程源。
  • dangerouslyLoadClientComponents — 需要从远程源加载组件。

强烈不建议启用危险加载客户端组件（dangerouslyLoadClientComponents），因为远程服务器的 javascript 不可信。

slots

如果声明了插槽，插槽可以传递给岛组件。
由于提供插槽的是父组件，因此每个插槽都是交互式的。

#fallback：指定在岛屿加载前（如果组件是懒惰的）或 NuxtIsland 无法获取组件时要渲染的内容。

示例

<template><NuxtIsland name="Hello" />
</template>

NuxtImg

Nuxt 提供了一个<NuxtImg> 组件来处理自动图像优化。

<NuxtImg> 是本地 标签的直接替代品。

  • 使用内置提供程序优化本地和远程图像
  • 将 src 转换为提供程序优化的 URL
  • 根据宽度和高度自动调整图片大小
  • 在提供尺寸选项时生成响应尺寸
  • 支持本地懒加载和其他 <img> 属性

详细内容请参考：NuxtImage

使用

要使用 <NuxtImg>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

<NuxtImg> 可直接输出原生 img 标记（周围没有任何封装）。使用它就像使用 标签一样：

<NuxtImg src="/nuxt-icon.png" />

NuxtPicture

Nuxt 提供了一个 <NuxtPicture> 组件来处理自动图像优化。
<NuxtPicture> 是原生 <picture> 标签的直接替代品。
<NuxtPicture> 的用法与 <NuxtImg> 几乎相同，但它也允许在可能的情况下提供 webp 等现代格式。

要使用 <NuxtPicture>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

Teleport

<Teleport> 组件可将组件传送到 DOM 中的不同位置。
和vue的teleport组件一样。

示例

<template><button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>
</template>
<template><ClientOnly><Teleport to="#some-selector"><!-- content --></Teleport></ClientOnly>
</template>

结语

结束了。

这篇关于【Nuxt3】内置组件介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/884672。

相关文章

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.
阅读更多...
Nginx添加内置模块过程

Nginx添加内置模块过程

《Nginx添加内置模块过程》文章指导如何检查并添加Nginx的with-http_gzip_static模块：确认该模块未默认安装后,需下载同版本源码重新编译,备份替换原有二进制文件,最后重启服务验... 目录1、查看Nginx已编辑的模块2、Nginx官网查看内置模块3、停止Nginx服务4、Nginx
阅读更多...
setsid 命令工作原理和使用案例介绍

setsid 命令工作原理和使用案例介绍

《setsid命令工作原理和使用案例介绍》setsid命令在Linux中创建独立会话,使进程脱离终端运行,适用于守护进程和后台任务,通过重定向输出和确保权限,可有效管理长时间运行的进程,本文给大家介... 目录setsid 命令介绍和使用案例基本介绍基本语法主要特点命令参数使用案例1. 在后台运行命令2.
阅读更多...
MySQL常用字符串函数示例和场景介绍

MySQL常用字符串函数示例和场景介绍

《MySQL常用字符串函数示例和场景介绍》MySQL提供了丰富的字符串函数帮助我们高效地对字符串进行处理、转换和分析,本文我将全面且深入地介绍MySQL常用的字符串函数,并结合具体示例和场景,帮你熟练... 目录一、字符串函数概述1.1 字符串函数的作用1.2 字符串函数分类二、字符串长度与统计函数2.1
阅读更多...
Olingo分析和实践之OData框架核心组件初始化(关键步骤)

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步：OData实例创建1.1 OData.newInstance() 详细分析1.1.1
阅读更多...
zookeeper端口说明及介绍

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》：本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口（可以修改）aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口（可以
阅读更多...
Python内置函数之classmethod函数使用详解

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》：本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客
阅读更多...
Python中win32包的安装及常见用途介绍

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,：本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作
阅读更多...
c++中的set容器介绍及操作大全

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》：本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2