【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。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...
Mysql BLOB类型介绍

Mysql BLOB类型介绍

BLOB类型的字段用于存储二进制数据 在MySQL中，BLOB类型，包括：TinyBlob、Blob、MediumBlob、LongBlob，这几个类型之间的唯一区别是在存储的大小不同。 TinyBlob 最大 255 Blob 最大 65K MediumBlob 最大 16M LongBlob 最大 4G
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2