单向数据流传递
在Vue中，所有的父子组件 prop 之间形成了一个单向下行绑定结构：父级 prop 的更新会向下传递到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致数据流向难以控制。
另外，当每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。所以在构建中不应该在一个子组件内部改变 prop，而是应该利用父组件来控制子组件的prop。Vue 也会在浏览器的控制台中发出警告。
如何声明和引入 props
声明 props
props: ['title', 'name', 'age', 'hobbies','fn']
形如此类在子组件内需要进行一个 props 的声明，说明传入了哪些 props，最简单的形式是这种包括n个字符串的数组。这种形式不限制各个传入prop 的数据类型。
如果需要指定各个 props 的数据类型，则 props 以对象形式声明
props: {
title: String,
name: String,
age: Number,
hobbies: Object,
fn: Function,
}
props 的数据类型 type
props可以传递各种的数据类型，即 type，由构造函数定义。
type 的原生构造函数如：
StringNumberBooleanArrayObjectDateFunctionSymbol此外，你还可以自定义构造函数，自由度非常高。
function Person () {...}
props: {
man: Person
}
注意，null 和 undefined 两个特殊数据类型通过任何类型定义均可识别。
props验证
props用对象定义还可以添加验证条件：
- require ———— 必须填写项目，必须传入，否则报错
- default ———— 默认值
- validate ———— 自定义验证函数，必须满足匹配条件才能成功传入，返回一个布尔值
举例：
props: {
name: {
type: String,
default: 'guest',
validate: (value) => {
return ['guest', 'host', 'friend'].indexOf(value) !== -1
}
}
}
props的传入
像这样给子组件 prop 传入一个静态的值（字符串）：
<blog-post title="My life" />
如果要传入其他类型值，prop 需要通过 v-bind 动态赋值：
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title" />
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post :title="post.title + ' by ' + post.author.name" />
<!-- v-bind 的简写形式是: 再复习一次 -->
<!-- 赋予一个函数 -->
<blog-post :fn="getContent" />
<!-- 赋予一个数字、布尔值 -->
<blog-post :age="24" :is-online="true" />
prop 名大小写规范
需要注意的是，同JS不同，HTML 中元素节点的 attribute 名称是大小写不敏感的，实际上浏览器会把所有大写字符解释为小写字符。当使用 DOM 模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名来代替。使用template字符串模板的话，没有这种限制，但建议统一标准避免混乱。
