Vue 'props' 选项
查看下面的更多示例
定义和用法
props 选项是一个数组（简单形式）或一个对象（完整形式），其中包含所有道具。
当 props 选项以数组形式给出时（简单形式，请参阅上面的示例），该数组仅由字符串形式的 props 名称组成。< /p>
当 props 选项作为对象给出时（完整形式，请参见下面的示例），除了 prop 名称之外，还可以定义多个选项:
| 选项 | 描述 |
|---|---|
| type | 定义 prop 数据类型。 可能的类型:字符串、数字、布尔值、数组、对象、日期、函数或符号。 如果实际提供的 prop 的类型与其定义的类型不同，Vue 将生成警告。 |
| default | 定义默认属性值。 如果父组件没有提供特定的 prop，则将使用默认值。 |
| required | 定义是否需要 props。 在开发模式下运行 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() 方法
Vue 参考:Vue $props 对象
