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
