tags: Vuejs

組件間的傳遞數據的方法 ✐

在 Vue 之中，組件之間的數據並不共用，換句話說，組件之間若是需要傳遞數據，需要透過幾種方式進行：

以下列出三種組件之間傳遞數據的方法：

1. 使用 prop 將父組件的數據傳遞給與子組件
2. 使用 事件 自子組件拋出值給父組件
3. 使用 Vuex

在這一篇中，我們會提及方法 1 的 Prop，透過該方法，我們可以將父組件的資料傳遞給子組件，需要注意的是，該方法不能將子組件的值傳遞給父組件，也不能在組件之間相互傳值。

Prop 如何使用

透過 Prop 單向將資料自父組件傳遞到子組件示意圖

Prop 是可以在子組件上註冊的自定義 attribute，一旦父組件使用該子組件，並且傳值給予該子組件的自定義 attribute，該 prop 變成為子組件 instance 的 property，子組件可以訪問該 property，如同訪問 data 一樣。

說明完如何父組件如何透過 Prop 傳遞數據給子組件後，做一個簡單的結論：

若是需要將父組件的值傳遞給子組件：

1. 子組件需要註冊自定義 prop attribute，負責接收來自父組件的值
2. 父組件透過該 prop attribute 傳值給子組件

一個簡單的 Prop 範例：

下面我們做出一個子組件（卡片），有標題、內文，我們希望它呈現下方父組件的數據。在這裡兩元件數據並不共享，需要透過 prop 將父組件的數據傳遞給子組件：

子組件模樣，標題、內文需要來源於父組件

父組件數據

items: [
  {
    title: "title1",
    text: "text1"
  },
  {
    title: "title2",
    text: "text2"
  },
  {
    title: "title3",
    text: "text3"
  },
  {
    title: "title4",
    text: "text4"
  }
]

需要將父組件的數據傳給子組件呈現，需要做到上面說的兩點：

1. 子組件需要註冊自定義 prop attribute，負責接收來自父組件的值
2. 父組件透過該 prop attribute 傳值給子組件

於是按照 第一點，我們先在子組件中註冊自定義 attribute title、text 負責稍後接收父組件傳遞的數據

Vue.component("my-component", {
  props: ["title", "text"],
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

第一點 完成後，便開始 第二點，父組件透過剛剛子組件註冊好的 prop attribute，傳遞要給予子組件的數據，title、text。

這裡由於數據為 Array，我們使用 v-for 多次渲染該子組件。

const vm = new Vue({
  el: ".app",
  data: {
    items: [
      {
        title: "title1",
        text: "text1"
      },
      {
        title: "title2",
        text: "text2"
      },
      {
        title: "title3",
        text: "text3"
      },
      {
        title: "title4",
        text: "text4"
      }
    ]
  },
  template: `
    <div class="app">
        <my-component v-for="item in items" :title="item.title" :text="item.text"></my-component>
    </div>`
});

此時父組件的值便透過剛剛一系列的操作傳遞給子組件，子組件可以訪問父組件傳入的數據 title、text，結果打印如下：

我們可以看到父組件的數據傳遞給了子組件。

結論

在拆分元件後，若是需要將父組件的值傳遞給子組件，需要透過 prop，此篇講述了 prop 的基礎使用方式，下一篇會繼續 prop 的介紹。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x
2. How To Pass Data Between Components In Vue.js — Smashing Magazine
3. Sharing data between component in Vue js | by kashif azmi | Medium