與VUE組件合作的初學者指南

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' })</pre>
登入後複製

組件的名稱是 my-counter。它可以這樣使用：

<div>
  <my-counter></my-counter>
</div></pre>
登入後複製

命名組件時，您可以選擇使用 kebab-case（my-custom-component）或 Pascal-case（MyCustomComponent）。在模板中引用組件時，可以使用任何一種變體，但在直接在 DOM 中引用組件時（如上例所示），只有 kebab-case 標籤名稱有效。

您可能還會注意到，在上例中，data 是一個返回對象字面量的函數（而不是對象字面量本身）。這樣做的目的是為了讓組件的每個實例都擁有自己的數據對象，而不必與所有其他實例共享一個全局實例。

定義組件模板的方法有幾種。上面我們使用了模板字面量，但我們也可以使用帶有 text/x-template 的標記或 DOM 內模板。您可以在這裡閱讀有關定義模板的不同方法的更多信息。

單文件組件

在更複雜的項目中，全局組件很快就會變得難以管理。在這種情況下，將應用程序設計為使用單文件組件是有意義的。顧名思義，這些是具有 .vue 擴展名的單個文件，其中包含 <template>、</pre>

而 MyCounter 組件可能如下所示：

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

new Vue({ el: '#app' })</pre>
登入後複製

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

Vue.component()在本指南中，我將使用

方法註冊組件來展示所有示例。

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

通過 Props 向組件傳遞數據

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

我們可以將這些分解成子組件，以便每個組件處理特定的數據，使組件樹看起來像這樣：

<div>
  <my-counter></my-counter>
</div></pre>
登入後複製

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

由於所有數據都將從父組件傳遞，它可能如下所示：

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
登入後複製

author-detail在上例組件中，我們定義了作者詳細信息和帖子信息。接下來，我們必須創建子組件。讓我們將子組件命名為

。因此，我們的 HTML 模板將如下所示：

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
登入後複製

owner我們將作者對像作為名為 owner 的 props 傳遞給子組件。這裡需要注意區別。在子組件中，author 是我們從父組件接收數據的 props 名稱。我們想要接收的數據稱為

，我們在父組件中定義了它。

author-detail要訪問此數據，我們需要在

組件中聲明 props：

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
登入後複製

我們還可以在傳遞 props 時啟用驗證，以確保傳遞正確的數據。這類似於 React 中的 PropTypes。要在上面的示例中啟用驗證，請將我們的組件更改為如下所示：

<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 驗證。

通過事件總線從子組件到父組件的通信

<script></code> 和 <code>&lt;style&gt;</code> 部分。</p> <p>对于上面的示例，App 组件可能如下所示：</p> <pre class="brush:php;toolbar:false"><code class="language-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>

事件通過創建包裝方法來處理，這些方法在發生所選事件時觸發。為了複習一下，讓我們基於我們最初的計數器示例進行擴展，以便每次單擊按鈕時它都會增加。

我們的組件應該如下所示：

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 事件，以便在每次單擊按鈕時觸發自定義的 increase 方法。然後，increase 方法會遞增我們的 count 數據屬性。現在讓我們擴展示例，將計數器按鈕移到單獨的組件中，並在父組件中顯示計數。我們可以使用事件總線來做到這一點。

當您想從子組件到父組件進行通信時，事件總線非常方便。這與默認的通信方法相反，默認的通信方法是從父組件到子組件。如果您的應用程序不夠大，不需要使用 Vuex，則可以使用事件總線。 （您可以在本 Vue 系列中的“Vuex 入門指南”中閱讀更多相關信息。）

所以我們要做的是：計數將在父組件中聲明並向下傳遞到子組件。然後在子組件中，我們要遞增 count 的值，並確保父組件中的值得到更新。

App 組件將如下所示：

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
登入後複製

然後在子組件中，我們要通過 props 接收計數，並有一個方法來遞增它。我們不想在子組件中顯示 count 的值。我們只想從子組件進行遞增，並使其反映在父組件中：

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
登入後複製

然後我們的模板將如下所示：

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
登入後複製

如果您嘗試像那樣遞增值，它將不起作用。為了使其工作，我們必須從子組件發出一個事件，發送 count 的新值，並且還在父組件中監聽此事件。

首先，我們創建一個新的 Vue 實例並將其設置為 eventBus：

<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
登入後複製

我們現在可以在我們的組件中使用事件總線。子組件將如下所示：

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>
登入後複製

每次調用 increment 方法時都會發出事件。我們必須在主組件中監聽該事件，然後將 count 設置為我們通過發出的事件獲得的值：

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
登入後複製

請注意，我們正在使用 Vue 的 created 生命週期方法在組件掛載之前連接到它，並設置事件總線。

如果您的應用程序不復雜，使用事件總線很好，但請記住，隨著應用程序的增長，您可能需要改用 Vuex。

使用 Slots 嵌套組件中的內容

在我們到目前為止看到的示例中，組件都是自閉合元素。但是，為了創建可以以有用的方式組合在一起的組件，我們需要能夠像使用 HTML 元素一樣將它們彼此嵌套。

如果您嘗試使用帶有結束標籤的組件並將一些內容放在裡面，您會看到 Vue 只是將其吞噬了。組件的開始和結束標籤之間的任何內容都將被組件本身的渲染輸出替換：

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

new Vue({ el: '#app' })</pre>
登入後複製

幸運的是，Vue 的 slots 使得將任意值傳遞給組件成為可能。這可以是來自父組件到子組件的任何東西，從 DOM 元素到其他數據。讓我們看看它們是如何工作的。

組件的腳本部分將如下所示：

<div>
  <my-counter></my-counter>
</div></pre>
登入後複製

然後模板將如下所示：

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
登入後複製

<list> 組件中的內容將在 <slot> 元素標籤之間呈現。我們還可以使用回退內容，以防父組件沒有註入任何內容。

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
登入後複製

如果沒有來自父組件的內容，回退內容將呈現。

結論

這是一個關於在 Vue 中使用組件的高級介紹。我們研究瞭如何在 Vue 中創建組件，如何通過 props 從父組件到子組件進行通信，以及如何通過事件總線從子組件到父組件進行通信。然後，我們通過查看 slots 來結束，這是一種以有用的方式組合組件的便捷方法。我希望您覺得本教程有用。

(FAQs 部分略去，因為篇幅過長，且與偽原創目標不符。 FAQs 部分內容可以根據需要重新編寫，但需保持原意不變。)

以上是與VUE組件合作的初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！