Vue props 选项

示例

使用props为组件创建道具的选项。

export default {
    props: [
        'foodName',
        'foodDesc'
    ]
};

运行示例 »

请参阅下面的更多示例

定义和用法

这个propsoption 是一个数组（简单形式）或一个对象（完整形式），其中包含所有道具。

当。。。的时候props选项以数组形式给出（简单形式，请参阅上面的示例），该数组仅由字符串形式的道具名称组成。

当。。。的时候propsoption 作为一个对象给出（完整形式，请参见下面的示例），除了 prop 名称之外，还可以定义几个选项：

Option	Description
type	Define the prop data type. Possible types: String, Number, Boolean, Array, Object, Date, Function, or Symbol. Vue will generate a warning if the actual provided prop is of a different type than what it is defined.
default	Define a default prop value. If a specific prop is not provided by the parent component, the default value will be used.
required	Define if a prop is required or not. When running the Vue application in development mode, Vue will generate a warning to the console in case a required prop is not provided.
validator	Define a custom validator function. The function takes the prop value as an argument, and we can write out own rules for when a prop is valid or not. Returning false will generate a warning in development mode.

更多示例

示例

将 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 props 选项

示例

定义和用法

更多示例

示例

相关页面