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

来源:https://www.cnblogs.com/Amd794/p/18288667
-Advertisement-
Play Games

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
  • 前端
  • 開發
  • 教程
  • 代碼

image

image

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

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

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

一、 組件的基本概念

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

二、 組件的屬性

  1. name 屬性

    • 類型:字元串
    • 作用:告訴 RouterView 在匹配的路由記錄的組件選項中使用對應名稱渲染組件。
    • 示例:如果您有多個具有不同名稱的頁面組件,通過設置 name 屬性可以準確指定要渲染的組件。
  2. route 屬性

    • 類型:RouteLocationNormalized
    • 作用:提供已解析的所有組件的路由位置信息。
  3. 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

往期文章歸檔:


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

-Advertisement-
Play Games
更多相關文章
  • UITabBarController 是 iOS 中用於管理和顯示選項卡界面的一個視圖控制器。它允許用戶在多個視圖控制器之間進行切換,每個視圖控制器對應一個選項卡。 主要功能 管理多個視圖控制器: UITabBarController 管理一個視圖控制器數組,每個視圖控制器對應一個選項卡。 顯示選項 ...
  • 在MVC模型中,V指view,負責用戶界面的顯示、處理用戶輸入,並將輸入傳遞給控制器。C是指ViewController,充當模型和視圖之間的中介。控制器接收用戶輸入,處理用戶請求,並將結果傳遞給視圖以更新顯示。本文詳細介紹在iOS開發中UIView與UIViewController的生命周期。 U ...
  • ‍ 寫在開頭 點贊 + 收藏 學會 理解 forEach JavaScript 的forEach方法是一種流行的數組迭代工具。它為每個數組元素執行一次提供的函數。但是,與傳統的for 和 while迴圈不同,forEach它被設計為對每個元素執行該函數,沒有內置機制來提前停止或中 ...
  • 本文介紹了NodeJS中流(Stream)的概念、類型和應用。流通過將數據分成小塊進行處理,優化了記憶體使用和數據處理效率。文章涵蓋了四種基本流類型:可讀流、可寫流、雙工流和轉換流,並通過實例代碼演示瞭如何使用流進行高效的數據傳輸和處理。 ...
  • title: Nuxt框架中內置組件詳解及使用指南(三) date: 2024/7/8 updated: 2024/7/8 author: cmdragon excerpt: 摘要:“Nuxt 3框架中與組件的深度使用教程,包括如何使用這兩個組件進行頁面導航和載入指示的自定義配置與實戰示例。” ca ...
  • NodeJS是一個基於V8引擎和libuv的JavaScript運行時,適用於輕量級和高效的數據密集型Web應用。其單線程、非阻塞IO模型依賴事件迴圈和線程池管理非同步任務。使用NodeJS開發需避免阻塞主線程,正確處理事件和錯誤。 ...
  • zustand 和 jotai 是當下比較流行的react狀態管理庫。其都有著輕量、方便使用,和react hooks能夠很好的搭配,並且性能方面,對比React自身提供的context要好得多,因此被很多開發小伙伴所喜愛。 更有意思的是,這兩個庫的作者是同一個人,同時他還開源了另外一個狀態庫 va ...
  • 前言 vue2的時候想必大家有遇到需要在style模塊中訪問script模塊中的響應式變數,為此我們不得不使用css變數去實現。現在vue3已經內置了這個功能啦,可以在style中使用v-bind指令綁定script模塊中的響應式變數,這篇文章我們來講講vue是如何實現在style中使用script ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...