Vue.js元件間通訊的設計模式

作為開發人員，我們希望產生可管理且可維護的程式碼，這也更容易除錯和測試。為了實現這一點，我們採用了稱為模式的最佳實踐。模式是經過驗證的演算法和架構，可以幫助我們以高效且可預測的方式完成特定任務。

在本教程中，我們將了解最常見的 Vue.js 元件通訊模式，以及我們應該避免的一些陷阱。我們都知道，在現實生活中，沒有單一的解決方案可以解決所有問題。同樣，在 Vue.js 應用程式開發中，不存在適用於所有程式設計場景的通用模式。每種模式都有其自身的優點和缺點，並且適合特定的用例。

對於 Vue.js 開發人員來說，最重要的是了解所有最常見的模式，這樣我們就可以為給定的專案選擇正確的模式。這將導致正確且高效的組件通訊。

為什麼正確的元件通訊很重要？

當我們使用 Vue.js 等基於元件的框架來建立應用程式時，我們的目標是使應用程式的元件盡可能隔離。這使得它們可重複使用、可維護和可測試。為了使元件可重複使用，我們需要以更抽象和解耦（或鬆散耦合）的形式塑造它，因此，我們可以將其添加到我們的應用程式中或將其刪除，而不會破壞應用程式的功能。

但是，我們無法在應用程式的元件中實現完全隔離和獨立。在某些時候，它們需要相互溝通：交換一些資料、更改應用程式的狀態等。因此，對於我們來說，學習如何正確完成這種通信，同時保持應用程式正常運作、靈活和可擴展非常重要。

#Vue.js 元件通訊概述

在 Vue.js 中，元件之間的通訊主要有兩種：

1. 直接的親子溝通，基於嚴格的父母與孩子以及孩子與父母的關係。
2. 跨元件通訊，其中一個元件可以與任何其他元件“對話”，無論它們之間的關係如何。

在以下部分中，我們將探討這兩種類型以及適當的範例。

直接親子溝通

Vue.js 開箱即用支援的元件通訊的標準模型是透過 props 和自訂事件實現的父子模型。在下圖中，您可以直觀地看到該模型的實際效果。

如您所見，父級只能與其直接子級通信，子級也只能直接與其父級通信。在此模型中，不可能進行同級或跨組件通訊。

在下面的部分中，我們將採用上圖中的元件，並在一系列實際範例中實現它們。

#親子溝通

假設我們擁有的元件是遊戲的一部分。大多數遊戲都會在介面中的某個位置顯示遊戲得分。想像一下，我們在 Parent A 元件中宣告了一個 score 變量，並且我們希望在 Child A 元件中顯示它。那麼，我們要怎麼做才能做到這一點呢？

為了將資料從父級傳送到子級，Vue.js 使用 props。傳遞屬性需要三個必要步驟：

1. 在子層級中註冊屬性，如下所示：props: ["score"]
2. 使用子模板中註冊的屬性，如下所示：<span>分數：{{ Score }}</span>
3. #將該屬性綁定到 score 變數（在父級模板中），如下所示：<child-a :score="score"></child-a>

讓我們探索一個完整的範例，以便更好地了解實際發生的情況：

// HTML part

<div id="app">
  <grand-parent/>
</div>

// JavaScript part

Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

登入後複製

登入後複製