Vue.js 的組件化架構(gòu)讓構(gòu)建用戶界面變得高效便捷。它允許你將應(yīng)用分解成更小、可複用的組件，然後用這些組件構(gòu)建更複雜的結(jié)構(gòu)。

本指南將為您提供 Vue 組件的高級(jí)入門(mén)介紹。我們將探討如何創(chuàng)建組件，如何在組件之間傳遞數(shù)據(jù)（通過(guò) props 和事件總線），以及如何使用 Vue 的 <slot></slot> 元素在組件內(nèi)渲染附加內(nèi)容。每個(gè)示例都將附帶可運(yùn)行的 CodePen 演示。

關(guān)鍵要點(diǎn)

• Vue 的組件化架構(gòu)有助於將 UI 分解成可重用、易於管理的片段，從而增強(qiáng)代碼的可重用性和組織性。
• 組件可以使用 Vue.component 全局創(chuàng)建，也可以在單文件組件中局部創(chuàng)建，對(duì)於復(fù)雜的項(xiàng)目來(lái)說(shuō)，後者由於封裝了模板、腳本和樣式，更適合使用。
• 可以使用 props 將數(shù)據(jù)傳遞給子組件，從而提供一種清晰且結(jié)構(gòu)化的方式來(lái)管理和傳遞組件樹(shù)中的數(shù)據(jù)。
• 可以使用事件總線有效地管理從子組件到父組件的通信，允許子組件將數(shù)據(jù)發(fā)送回組件層次結(jié)構(gòu)。
• Vue 的 <slot></slot> 元素有助於在組件內(nèi)嵌套內(nèi)容，使其更靈活，並能夠接收來(lái)自父組件的內(nèi)容，這些內(nèi)容可以用回退內(nèi)容覆蓋。

如何在 Vue 中創(chuàng)建組件

組件本質(zhì)上是具有名稱(chēng)的可重用 Vue 實(shí)例。在 Vue 應(yīng)用中創(chuàng)建組件的方法有很多種。例如，在小型到中型項(xiàng)目中，您可以使用 Vue.component 方法註冊(cè)全局組件，如下所示：

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
組件的名稱(chēng)是 my-counter。它可以這樣使用：
<div>
  <my-counter></my-counter>
</div></pre>
命名組件時(shí)，您可以選擇使用 kebab-case（my-custom-component）或 Pascal-case（MyCustomComponent）。在模板中引用組件時(shí)，可以使用任何一種變體，但在直接在 DOM 中引用組件時(shí)（如上例所示），只有 kebab-case 標(biāo)籤名稱(chēng)有效。 
您可能還會(huì)注意到，在上例中，data 是一個(gè)返回對(duì)象字面量的函數(shù)（而不是對(duì)象字面量本身）。這樣做的目的是為了讓組件的每個(gè)實(shí)例都擁有自己的數(shù)據(jù)對(duì)象，而不必與所有其他實(shí)例共享一個(gè)全局實(shí)例。 
定義組件模板的方法有幾種。上面我們使用了模板字面量，但我們也可以使用帶有 text/x-template 的標(biāo)記或 DOM 內(nèi)模板。您可以在這裡閱讀有關(guān)定義模板的不同方法的更多信息。 
單文件組件
在更複雜的項(xiàng)目中，全局組件很快就會(huì)變得難以管理。在這種情況下，將應(yīng)用程序設(shè)計(jì)為使用單文件組件是有意義的。顧名思義，這些是具有 .vue 擴(kuò)展名的單個(gè)文件，其中包含 <template>、</pre>

而 MyCounter 組件可能如下所示：
Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>

如您所見(jiàn)，使用單文件組件時(shí)，可以直接在需要它們的組件中導(dǎo)入和使用它們。 

Vue.component()在本指南中，我將使用 
 方法註冊(cè)組件來(lái)展示所有示例。 

使用單文件組件通常涉及構(gòu)建步驟（例如，使用 Vue CLI）。如果您想了解更多信息，請(qǐng)查看本 Vue 系列中的“Vue CLI 入門(mén)指南”。 

通過(guò) Props 向組件傳遞數(shù)據(jù)

Props 使我們能夠?qū)?shù)據(jù)從父組件傳遞到子組件。這使得我們的組件可以分成更小的塊來(lái)處理特定的功能。例如，如果我們有一個(gè)博客組件，我們可能想要顯示諸如作者詳細(xì)信息、帖子詳細(xì)信息（標(biāo)題、正文和圖像）和評(píng)論等信息。 

我們可以將這些分解成子組件，以便每個(gè)組件處理特定的數(shù)據(jù)，使組件樹(shù)看起來(lái)像這樣：
<div>
  <my-counter></my-counter>
</div></pre>

如果您仍然不相信使用組件的好處，請(qǐng)花點(diǎn)時(shí)間意識(shí)到這種組合方式有多麼有用。如果您將來(lái)要重新訪問(wèn)此代碼，您會(huì)立即清楚頁(yè)面是如何構(gòu)建的，以及您應(yīng)該在哪裡（即在哪個(gè)組件中）查找哪個(gè)功能。這種聲明式的方式來(lái)組合界面也使得不熟悉代碼庫(kù)的人更容易快速上手並提高效率。 

由於所有數(shù)據(jù)都將從父組件傳遞，它可能如下所示：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>

author-detail在上例組件中，我們定義了作者詳細(xì)信息和帖子信息。接下來(lái)，我們必須創(chuàng)建子組件。讓我們將子組件命名為 
。因此，我們的 HTML 模板將如下所示：
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>

owner我們將作者對(duì)像作為名為 owner 的 props 傳遞給子組件。這裡需要注意區(qū)別。在子組件中，author 是我們從父組件接收數(shù)據(jù)的 props 名稱(chēng)。我們想要接收的數(shù)據(jù)稱(chēng)為 
，我們?cè)诟附M件中定義了它。 

author-detail要訪問(wèn)此數(shù)據(jù)，我們需要在 
 組件中聲明 props：
new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>

我們還可以在傳遞 props 時(shí)啟用驗(yàn)證，以確保傳遞正確的數(shù)據(jù)。這類(lèi)似於 React 中的 PropTypes。要在上面的示例中啟用驗(yàn)證，請(qǐng)將我們的組件更改為如下所示：
<div>
  <author-detail :owner="author"></author-detail>
</div></pre>

如果我們傳遞錯(cuò)誤的 prop 類(lèi)型，您將在控制臺(tái)中看到類(lèi)似於我下面顯示的錯(cuò)誤：
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>

Vue 文檔中有一份官方指南，您可以使用它來(lái)了解 prop 驗(yàn)證。 

通過(guò)事件總線從子組件到父組件的通信
<script></code> 和 <code>&lt;style&gt;</code> 部分。</p>
<p>對(duì)于上面的示例，App 組件可能如下所示：</p>
<pre class="brush:php;toolbar:false"><code class="vue">&lt;template&gt;
  <div>
    <my-counter></my-counter>
  </div>
</template>

<script>
import myCounter from './components/myCounter.vue'

export default {
  name: 'app',
  components: { myCounter }
}
</script>
事件通過(guò)創(chuàng)建包裝方法來(lái)處理，這些方法在發(fā)生所選事件時(shí)觸發(fā)。為了複習(xí)一下，讓我們基於我們最初的計(jì)數(shù)器示例進(jìn)行擴(kuò)展，以便每次單擊按鈕時(shí)它都會(huì)增加。 
我們的組件應(yīng)該如下所示：
Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
以及我們的模板：
<div>
  <my-counter></my-counter>
</div></pre>
這希望足夠簡(jiǎn)單。如您所見(jiàn)，我們正在連接到 onClick 事件，以便在每次單擊按鈕時(shí)觸發(fā)自定義的 increase 方法。然後，increase 方法會(huì)遞增我們的 count 數(shù)據(jù)屬性?，F(xiàn)在讓我們擴(kuò)展示例，將計(jì)數(shù)器按鈕移到單獨(dú)的組件中，並在父組件中顯示計(jì)數(shù)。我們可以使用事件總線來(lái)做到這一點(diǎn)。 
當(dāng)您想從子組件到父組件進(jìn)行通信時(shí)，事件總線非常方便。這與默認(rèn)的通信方法相反，默認(rèn)的通信方法是從父組件到子組件。如果您的應(yīng)用程序不夠大，不需要使用 Vuex，則可以使用事件總線。 （您可以在本 Vue 系列中的“Vuex 入門(mén)指南”中閱讀更多相關(guān)信息。）
所以我們要做的是：計(jì)數(shù)將在父組件中聲明並向下傳遞到子組件。然後在子組件中，我們要遞增 count 的值，並確保父組件中的值得到更新。 
App 組件將如下所示：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>
然後在子組件中，我們要通過(guò) props 接收計(jì)數(shù)，並有一個(gè)方法來(lái)遞增它。我們不想在子組件中顯示 count 的值。我們只想從子組件進(jìn)行遞增，並使其反映在父組件中：
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
然後我們的模板將如下所示：
new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
如果您嘗試像那樣遞增值，它將不起作用。為了使其工作，我們必須從子組件發(fā)出一個(gè)事件，發(fā)送 count 的新值，並且還在父組件中監(jiān)聽(tīng)此事件。 
首先，我們創(chuàng)建一個(gè)新的 Vue 實(shí)例並將其設(shè)置為 eventBus：
<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
我們現(xiàn)在可以在我們的組件中使用事件總線。子組件將如下所示：
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>
每次調(diào)用 increment 方法時(shí)都會(huì)發(fā)出事件。我們必須在主組件中監(jiān)聽(tīng)該事件，然後將 count 設(shè)置為我們通過(guò)發(fā)出的事件獲得的值：
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
請(qǐng)注意，我們正在使用 Vue 的 created 生命週期方法在組件掛載之前連接到它，並設(shè)置事件總線。 
如果您的應(yīng)用程序不復(fù)雜，使用事件總線很好，但請(qǐng)記住，隨著應(yīng)用程序的增長(zhǎng)，您可能需要改用 Vuex。 
使用 Slots 嵌套組件中的內(nèi)容
在我們到目前為止看到的示例中，組件都是自閉合元素。但是，為了創(chuàng)建可以以有用的方式組合在一起的組件，我們需要能夠像使用 HTML 元素一樣將它們彼此嵌套。 
如果您嘗試使用帶有結(jié)束標(biāo)籤的組件並將一些內(nèi)容放在裡面，您會(huì)看到 Vue 只是將其吞噬了。組件的開(kāi)始和結(jié)束標(biāo)籤之間的任何內(nèi)容都將被組件本身的渲染輸出替換：
Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
幸運(yùn)的是，Vue 的 slots 使得將任意值傳遞給組件成為可能。這可以是來(lái)自父組件到子組件的任何東西，從 DOM 元素到其他數(shù)據(jù)。讓我們看看它們是如何工作的。 
組件的腳本部分將如下所示：
<div>
  <my-counter></my-counter>
</div></pre>
然後模板將如下所示：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>
<list> 組件中的內(nèi)容將在 <slot> 元素標(biāo)籤之間呈現(xiàn)。我們還可以使用回退內(nèi)容，以防父組件沒(méi)有註入任何內(nèi)容。 
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
如果沒(méi)有來(lái)自父組件的內(nèi)容，回退內(nèi)容將呈現(xiàn)。 
結(jié)論
這是一個(gè)關(guān)於在 Vue 中使用組件的高級(jí)介紹。我們研究瞭如何在 Vue 中創(chuàng)建組件，如何通過(guò) props 從父組件到子組件進(jìn)行通信，以及如何通過(guò)事件總線從子組件到父組件進(jìn)行通信。然後，我們通過(guò)查看 slots 來(lái)結(jié)束，這是一種以有用的方式組合組件的便捷方法。我希望您覺(jué)得本教程有用。 
(FAQs 部分略去，因?yàn)槠^(guò)長(zhǎng)，且與偽原創(chuàng)目標(biāo)不符。  FAQs 部分內(nèi)容可以根據(jù)需要重新編寫(xiě)，但需保持原意不變。)
以上是與VUE組件合作的初學(xué)者指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！