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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<??></pre>

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

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

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

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

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

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

通過事件總線從子組件到父組件的通信
<script></code> 和 <code>&lt;style&gt;</code> 部分。</p>
<p>對于上面的示例，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>
事件通過創(chuàng)建包裝方法來處理，這些方法在發(fā)生所選事件時觸發(fā)。為了複習(xí)一下，讓我們基於我們最初的計(jì)數(shù)器示例進(jìn)行擴(kuò)展，以便每次單擊按鈕時它都會增加。 
我們的組件應(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>
這希望足夠簡單。如您所見，我們正在連接到 onClick 事件，以便在每次單擊按鈕時觸發(fā)自定義的 increase 方法。然後，increase 方法會遞增我們的 count 數(shù)據(jù)屬性?，F(xiàn)在讓我們擴(kuò)展示例，將計(jì)數(shù)器按鈕移到單獨(dú)的組件中，並在父組件中顯示計(jì)數(shù)。我們可以使用事件總線來做到這一點(diǎn)。 
當(dāng)您想從子組件到父組件進(jìn)行通信時，事件總線非常方便。這與默認(rèn)的通信方法相反，默認(rèn)的通信方法是從父組件到子組件。如果您的應(yīng)用程序不夠大，不需要使用 Vuex，則可以使用事件總線。 （您可以在本 Vue 系列中的“Vuex 入門指南”中閱讀更多相關(guān)信息。）
所以我們要做的是：計(jì)數(shù)將在父組件中聲明並向下傳遞到子組件。然後在子組件中，我們要遞增 count 的值，並確保父組件中的值得到更新。 
App 組件將如下所示：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>
然後在子組件中，我們要通過 props 接收計(jì)數(shù)，並有一個方法來遞增它。我們不想在子組件中顯示 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ā)出一個事件，發(fā)送 count 的新值，並且還在父組件中監(jiān)聽此事件。 
首先，我們創(chuàng)建一個新的 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 方法時都會發(fā)出事件。我們必須在主組件中監(jiān)聽該事件，然後將 count 設(shè)置為我們通過發(fā)出的事件獲得的值：
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
請注意，我們正在使用 Vue 的 created 生命週期方法在組件掛載之前連接到它，並設(shè)置事件總線。 
如果您的應(yīng)用程序不復(fù)雜，使用事件總線很好，但請記住，隨著應(yīng)用程序的增長，您可能需要改用 Vuex。 
使用 Slots 嵌套組件中的內(nèi)容
在我們到目前為止看到的示例中，組件都是自閉合元素。但是，為了創(chuàng)建可以以有用的方式組合在一起的組件，我們需要能夠像使用 HTML 元素一樣將它們彼此嵌套。 
如果您嘗試使用帶有結(jié)束標(biāo)籤的組件並將一些內(nèi)容放在裡面，您會看到 Vue 只是將其吞噬了。組件的開始和結(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 使得將任意值傳遞給組件成為可能。這可以是來自父組件到子組件的任何東西，從 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)容，以防父組件沒有註入任何內(nèi)容。 
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
如果沒有來自父組件的內(nèi)容，回退內(nèi)容將呈現(xiàn)。 
結(jié)論
這是一個關(guān)於在 Vue 中使用組件的高級介紹。我們研究瞭如何在 Vue 中創(chuàng)建組件，如何通過 props 從父組件到子組件進(jìn)行通信，以及如何通過事件總線從子組件到父組件進(jìn)行通信。然後，我們通過查看 slots 來結(jié)束，這是一種以有用的方式組合組件的便捷方法。我希望您覺得本教程有用。 
(FAQs 部分略去，因?yàn)槠^長，且與偽原創(chuàng)目標(biāo)不符。  FAQs 部分內(nèi)容可以根據(jù)需要重新編寫，但需保持原意不變。)
以上是與VUE組件合作的初學(xué)者指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！