Vue 'props' 選項
檢視下面的更多示例
定義和用法
props 選項是一個數組（簡單形式）或一個物件（完整形式），其中包含所有 props。
當 props 選項被提供為一個數組（簡單形式，參見上面的示例）時，陣列僅包含字串形式的 prop 名稱。
當 props 選項被提供為一個物件（完整形式，參見下面的示例）時，除了 prop 名稱之外，還可以定義幾個選項。
| 選項 | 描述 |
|---|---|
| type | 定義 prop 的資料型別。可能的型別：String、Number、Boolean、Array、Object、Date、Function 或 Symbol。如果實際提供的 prop 的型別與定義的不同，Vue 將會生成一個警告。 |
| default | 定義 prop 的預設值。如果父元件沒有提供某個 prop，則會使用預設值。 |
| required | 定義 prop 是否必需。當在開發模式下執行 Vue 應用程式時，如果缺少必需的 prop，Vue 會在控制檯生成警告。 |
| validator | 定義一個自定義驗證器函式。該函式接收 prop 值作為引數，我們可以自行編寫規則來判斷 prop 是否有效。返回 false 將在開發模式下生成警告。 |
更多示例
示例
將 props 定義為帶有選項的物件。
FoodItem.vue:
<template>
<div>
<h2>{{ foodName }}</h2>
<p>{{ foodDesc }}</p>
</div>
</template>
<script>
export default {
props: {
foodName: {
type: String,
required: true
},
foodDesc: {
type: String,
required: false,
default: 'This is the food description...'
}
}
};
</script>
App.vue:
<template>
<h1>Food</h1>
<p>Food description is not provided for 'Pizza' and 'Rice', so the default description is used.</p>
<div id="wrapper">
<food-item
food-name="Apples"
food-desc="Apples are a type of fruit that grow on trees."/>
<food-item
food-name="Pizza"/>
<food-item
food-name="Rice"/>
</div>
</template>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper > div {
border: dashed black 1px;
flex-basis: 120px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>
相關頁面
Vue 教程：Vue Props
Vue 教程：Vue $emit() Method
Vue Reference: Vue $props Object
