iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

每天來點 Vue.js 吧系列 第 16

Vue component 父組件向子組件傳遞數據的方法 - Prop(上)

tags: Vuejs

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

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

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

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

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

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 titletext 負責稍後接收父組件傳遞的數據

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

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

這裡由於數據為 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>`
});

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

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

結論

在拆分元件後,若是需要將父組件的值傳遞給子組件,需要透過 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

上一篇
Vue components 組件的抽象概念 ✏︎
下一篇
Vue component 父組件向子組件傳遞數據的方法 - Prop(下)
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言