初步認識 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 的用法，敬請期待～

參考資料

JavaScript Vue
Vue

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