Vue.js 的組件化架構讓構建用戶界面變得高效便捷。它允許你將應用分解成更小、可複用的組件，然後用這些組件構建更複雜的結構。
本指南將為您提供 Vue 組件的高級入門介紹。我們將探討如何創建組件，如何在組件之間傳遞數據（通過 props 和事件總線），以及如何使用 Vue 的 <slot></slot> 元素在組件內渲染附加內容。每個示例都將附帶可運行的 CodePen 演示。
關鍵要點
- Vue 的組件化架構有助於將 UI 分解成可重用、易於管理的片段，從而增強代碼的可重用性和組織性。
- 組件可以使用
Vue.component全局創建，也可以在單文件組件中局部創建，對於復雜的項目來說，後者由於封裝了模板、腳本和样式，更適合使用。 - 可以使用 props 將數據傳遞給子組件，從而提供一種清晰且結構化的方式來管理和傳遞組件樹中的數據。
- 可以使用事件總線有效地管理從子組件到父組件的通信，允許子組件將數據發送回組件層次結構。
- Vue 的
<slot></slot>元素有助於在組件內嵌套內容，使其更靈活，並能夠接收來自父組件的內容，這些內容可以用回退內容覆蓋。
如何在 Vue 中創建組件
組件本質上是具有名稱的可重用 Vue 實例。在 Vue 應用中創建組件的方法有很多種。例如，在小型到中型項目中，您可以使用 Vue.component 方法註冊全局組件，如下所示：
Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' })
組件的名稱是 my-counter。它可以這樣使用：
<div> <my-counter></my-counter> </div>
命名組件時，您可以選擇使用 kebab-case（my-custom-component）或 Pascal-case（MyCustomComponent）。在模板中引用組件時，可以使用任何一種變體，但在直接在 DOM 中引用組件時（如上例所示），只有 kebab-case 標籤名稱有效。
您可能還會注意到，在上例中，data 是一個返回對象字面量的函數（而不是對象字面量本身）。這樣做的目的是為了讓組件的每個實例都擁有自己的數據對象，而不必與所有其他實例共享一個全局實例。
定義組件模板的方法有幾種。上面我們使用了模板字面量，但我們也可以使用帶有 text/x-template 的標記或 DOM 內模板。您可以在這裡閱讀有關定義模板的不同方法的更多信息。
單文件組件
在更複雜的項目中，全局組件很快就會變得難以管理。在這種情況下，將應用程序設計為使用單文件組件是有意義的。顧名思義，這些是具有 .vue 擴展名的單個文件，其中包含 <template></template>、
而 MyCounter 組件可能如下所示：
Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' })
如您所見，使用單文件組件時，可以直接在需要它們的組件中導入和使用它們。
Vue.component()在本指南中，我將使用
使用單文件組件通常涉及構建步驟（例如，使用 Vue CLI）。如果您想了解更多信息，請查看本 Vue 系列中的“Vue CLI 入門指南”。
通過 Props 向組件傳遞數據
Props 使我們能夠將數據從父組件傳遞到子組件。這使得我們的組件可以分成更小的塊來處理特定的功能。例如，如果我們有一個博客組件，我們可能想要顯示諸如作者詳細信息、帖子詳細信息（標題、正文和圖像）和評論等信息。
我們可以將這些分解成子組件，以便每個組件處理特定的數據，使組件樹看起來像這樣：
<div> <my-counter></my-counter> </div>
如果您仍然不相信使用組件的好處，請花點時間意識到這種組合方式有多麼有用。如果您將來要重新訪問此代碼，您會立即清楚頁面是如何構建的，以及您應該在哪裡（即在哪個組件中）查找哪個功能。這種聲明式的方式來組合界面也使得不熟悉代碼庫的人更容易快速上手並提高效率。
由於所有數據都將從父組件傳遞，它可能如下所示：
<template>
<div>{{ count }}</div>
</template>
<🎜>
author-detail在上例組件中，我們定義了作者詳細信息和帖子信息。接下來，我們必須創建子組件。讓我們將子組件命名為
<blogpost> <authordetails></authordetails> <postdetails></postdetails> <comments></comments> </blogpost>
owner我們將作者對像作為名為 owner 的 props 傳遞給子組件。這裡需要注意區別。在子組件中，author 是我們從父組件接收數據的 props 名稱。我們想要接收的數據稱為
author-detail要訪問此數據，我們需要在
new Vue({
el: '#app',
data() {
return {
author: {
name: 'John Doe',
email: 'jdoe@example.com'
}
}
}
})
我們還可以在傳遞 props 時啟用驗證，以確保傳遞正確的數據。這類似於 React 中的 PropTypes。要在上面的示例中啟用驗證，請將我們的組件更改為如下所示：
<div> <author-detail :owner="author"></author-detail> </div>
如果我們傳遞錯誤的 prop 類型，您將在控制台中看到類似於我下面顯示的錯誤：
Vue.component('author-detail', {
template: `
<div>
<h2 id="owner-name">{{ owner.name }}</h2>
<p>{{ owner.email }}</p>
</div>
`,
props: ['owner']
})
Vue 文檔中有一份官方指南，您可以使用它來了解 prop 驗證。
通過事件總線從子組件到父組件的通信
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
Atom編輯器mac版下載
最受歡迎的的開源編輯器
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
