Nuxt框架中內置組件詳解及使用指南（二）

-Advertisement-

title: Nuxt框架中內置組件詳解及使用指南（二） date: 2024/7/7 updated: 2024/7/7 author: cmdragon excerpt: 摘要：“本文詳細介紹了Nuxt 3中和組件的使用方法，包括組件的基本概念、屬性、自定義屬性、獲取引用以及完整示例，展示瞭如何 ...

title: Nuxt框架中內置組件詳解及使用指南（二）
date: 2024/7/7
updated: 2024/7/7
author: cmdragon

excerpt:
摘要：“本文詳細介紹了Nuxt 3中和組件的使用方法，包括組件的基本概念、屬性、自定義屬性、獲取引用以及完整示例，展示瞭如何在Nuxt項目中有效利用這兩個組件。

categories:

前端開發

tags:

Nuxt3
組件
Vue
前端
開發
教程
代碼

掃描二維碼關註或者微信搜一搜：`編程智域前端至全棧交流與成長`

Nuxt 3 中`<NuxtPage>`組件的使用指南與示例

<NuxtPage>組件用於顯示位於pages/目錄中的頁面。

一、組件的基本概念

組件是 Nuxt 內置的，它實際上是對 Vue Router 的 <RouterView> 組件的封裝。這意味著它承擔著根據路由規則來正確顯示相應頁面內容的重要職責。

二、組件的屬性

name 屬性
- 類型：字元串
- 作用：告訴 RouterView 在匹配的路由記錄的組件選項中使用對應名稱渲染組件。
- 示例：如果您有多個具有不同名稱的頁面組件，通過設置 name 屬性可以準確指定要渲染的組件。
route 屬性
- 類型：RouteLocationNormalized
- 作用：提供已解析的所有組件的路由位置信息。
pageKey 屬性
- 類型：可以是字元串或函數
- 作用：控制組件何時重新渲染。
- 示例：
  - 傳遞 static 鍵，組件在掛載時只會渲染一次。
```
<template>
  <NuxtPage page-key="static" />
</template>
```
  - 使用基於當前路由的動態鍵，如 route => route.fullPath 。
```
<NuxtPage :page-key="route => route.fullPath" />
```

需要特別註意的是，在使用 pageKey 時，不要使用 $route 對象，因為這可能會在與一起渲染頁面時引發問題。

此外，pageKey 還可以通過 pages 目錄中的 Vue 組件的 definePageMeta 來傳遞。

三、獲取頁面組件的引用

要獲取組件的引用，可以通過以下方式：

<template>
  <NuxtPage ref="page" />
</template>

<script>
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

在上述代碼中，我們定義了一個名為 page 的引用，並通過 page.value.pageRef 來訪問頁面組件的相關方法或屬性。

四、自定義屬性

組件還支持自定義屬性，您可以根據需要向下傳遞這些屬性。並且可以通過 Nuxt 應用的 attrs 來訪問這些自定義屬性。

例如：

<NuxtPage :foobar="123" />

在模板中可以使用 $attrs.foobar ，或者在腳本中使用 useAttrs().foobar 來獲取其值。

完整示例：

步驟 1: 創建一個 Nuxt.js 項目

首先，你需要安裝 Node.js 和 npm。然後，你可以使用以下命令創建一個新的 Nuxt.js 項目：

npx create-nuxt-app my-nuxt-project

按照提示完成安裝和配置。

步驟 2: 創建一個頁面組件

在 pages/ 目錄下，創建一個新的頁面組件，例如 about.vue：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

<style scoped>
/* 在這裡添加頁面樣式 */
</style>

步驟 3: 在頁面中使用 `<NuxtPage>` 組件

現在，我們可以在父組件中使用 <NuxtPage> 來渲染 about.vue 頁面。在 pages/index.vue 中添加以下代碼：

<template>
  <div>
    <h1>Welcome to Nuxt.js</h1>
    <NuxtPage />
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
/* 在這裡添加頁面樣式 */
</style>

在這個例子中，<NuxtPage> 會自動載入並渲染 about.vue 組件，因為 index.vue 是 Nuxt.js 的預設入口頁面。

步驟 4: 運行項目並查看結果

在項目根目錄下，運行以下命令來啟動開發伺服器：

npm run dev

打開瀏覽器並訪問 http://localhost:3000，你應該能看到一個歡迎標題和一個由 <NuxtPage> 渲染的關於頁面。

Nuxt 3 中`<NuxtLayout>`組件的使用指南與示例

Nuxt 提供了 <NuxtLayout> 組件來在頁面和錯誤頁面上顯示佈局。

基礎用法

首先，讓我們看看如何在 app.vue 或 error.vue 中使用 <NuxtLayout> 來激活預設佈局。

app.vue 示例：

<template>
  <NuxtLayout>
    <!-- 頁面內容放在這裡 -->
    <div>這是頁面內容</div>
  </NuxtLayout>
</template>

在上面的代碼中，<NuxtLayout> 組件被用作包裹頁面內容的容器。它會自動使用 layouts/default.vue 文件作為佈局。

指定佈局名稱

如果你想要使用自定義的佈局，可以通過 name 屬性來指定佈局名稱。

pages/index.vue 示例：

<script setup>
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

在上面的代碼中，我們通過一個響應式引用 layout 來指定佈局名稱為 custom，這會渲染 layouts/custom.vue 文件。

註意： 佈局名稱會被轉換為 kebab-case，所以如果你的佈局文件名為 errorLayout.vue，那麼在傳遞給 <NuxtLayout> 時應該使用 error-layout。

傳遞附加 Props

過渡效果

獲取佈局組件的 Ref

完整示例

餘下文章內容請點擊跳轉至個人博客頁面或者掃碼關註或者微信搜一搜：編程智域前端至全棧交流與成長，閱讀完整的文章：Nuxt框架中內置組件詳解及使用指南（二） | cmdragon's Blog

往期文章歸檔：

您的分享是我們最大的動力!