Vue 'props' 选项

实例

使用 props 选项为组件创建 prop。

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

运行一下

定义与用法

props 选项是一个数组（简单形式）或一个对象（完整形式），其中包含所有 prop。

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

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

选项	描述
type	定义 prop 数据类型可能的类型：字符串、数字、布尔值、数组、对象、日期、函数或符号如果实际提供的道具与定义的 prop 类型不同，Vue 将生成警告。
default	定义默认 prop 值如果父组件没有提供特定的 prop，则将使用默认值。
required	定义是否需要 prop 在开发模式下运行 Vue 应用程序时，如果没有提供所需的 prop，Vue 将向控制台生成警告。
validator	定义一个自定义验证器函数该函数将 prop 值作为参数，我们可以为 prop 的有效与否编写自己的规则。返回 false 将在开发模式中生成警告。

更多实例

实例

将 prop 定义为具有选项的对象。

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 对象

Vue 'props' 选项

实例

定义与用法

更多实例

实例

关联页面

分类导航