初步認識 Vue Props,父元件傳入值給子元件!

Vue 的頁面由一組又一組的元件所組成,其中或多或少會需要元件之間傳遞值,首先如果是父層元件要將值傳給子層元件,該怎麼設定呢?今天就來介紹 Props 這個能夠將值傳遞給子元件的機制。

將資料傳入元件

用法

1
<元件Tag Props名稱="傳入值" />

來段範例

1
<card :title="item.title" :img="item.imgUrl" />

方法很簡單,就是在元件的 HTML 標籤內增加屬性,屬性名稱就是我們要設定的 Props 名稱,並將傳入值帶入,如果帶入值為變數可使用 v-bind 形式傳入。

如此一來元件內就會運用我們在此時設定的 Props 名稱來取傳入值。

子元件接收傳入值:陣列寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
data () {
return {
text: '文字',
}
},
// props: ['Props 名稱 1', 'Props 名稱 2', /* ... 以此類堆 */ ]
props: ['title', 'img'],
mounted() {
console.log(this.title);
console.log(this.img);
}
}

我們在以上範例中增加了一個 props 的陣列,裡面擺放了兩個陣列元素的名稱要跟外面傳入的 Props 是一樣的,如此一來我們便能利用 props 來去做後續的操作,以此範例為例我們在 mounted() 內 console 出兩個傳入值。

子元件接收傳入值:物件寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default {
data () {
return {
text: '文字',
}
},
props: {
title: {
type: String,
default: '預設值',
required: true,
},
img: {
type: String,
default: '預設值',
required: true,
},
},
mounted() {
console.log(this.title);
console.log(this.img);
}
}

使用這個寫法的好處是能夠自訂預設值,假設外層沒傳入資料,還是能夠透過這裡設定的預設值來進行運算,同時能夠加入驗證機制,從傳入時即判斷值是否合乎驗證規則。

後記

這篇介紹的 Props 讓父層資料可以傳遞給子元件進行處理,但既然資料可以傳入,代表同樣能夠將資料傳遞回父元件。因此下一次就要介紹 Emit 的用法,敬請期待~

參考資料


本站所有文章除特別聲明外,均採用 BY-NC-SA 許可協議。轉載請註明出處!