在使用prop之前，先注意一下官网的命名提示：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
-
Prop的大小写
Vue.component('com-child', {
// 在 JavaScript 中是 camelCase 的
props: ['formList'],
template: '{{ formList}}
'
})
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
-
Prop类型
1、字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
2、对象形式(每个 prop 都有指定的值类型)
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
-
传递静态或动态 Prop
给 prop 传入一个静态的值：
可以通过 v-bind 动态赋值：
-
单向数据流
引用官网：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
有两种常见的试图改变一个 prop 的情形：
1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
2、这个 prop 以一种原始的值传入且需要进行转换
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
-
Prop 验证
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字,当父组件没传值（传空值也算传了），则用默认值
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
type：可以是下列原生构造函数中的一个 ：
String
Number
Boolean
Array
Object
Date
Function
Symbol
还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认，具体可参考：类型检查
-
非 Prop 的特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
例如：通过一个 Bootstrap 插件使用了一个第三方的
替换/合并已有的特性
对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！class 和 style 特性会稍微智能一些，即两边的值会被合并起来。
禁用特性继承
首先假设有如下组件：