Prop

基本使用

你可以在组件上注册的一些自定义 attribute。

Vue.component('blog-post', {  
props: ['title'],  
template: '<h3>{{ title }}</h3>'  
})

一个 prop 被注册之后，你就可以像这样把数据传递进来

<blog-post title="My journey with Vue"></blog-post>  
<blog-post title="Blogging with Vue"></blog-post>  
<blog-post title="Why Vue is so fun"></blog-post>

当一个值传递给prop对应的attribute后此组件实例就拥有了该属性。

大小写问题

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 (短横线分隔命名) 命名：

Vue.component('blog-post', {  
// 在 JavaScript 中是 camelCase 的  
props: ['postTitle'],  
template: '<h3>{{ postTitle }}</h3>'  
})

<!-- 在 HTML 中是 kebab-case 的 --> 
<blog-post post-title="hello!"></blog-post>

传递一个对象的所有属性

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {  
id: 1,  
title: 'My Journey with Vue'  
}

<!-- post对象的所有属性值会对应添加至Props中 -->
<blog-post v-bind="post"></blog-post>

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

子需要更改props的两种情况

1、接受的prop值希望作为数据的初始值使用（使用就可能发生操作

解决：在本地定义一个数据

2、对接受的props进行格式的更改

解决:计算属性    

prop验证

对接受的数据进行格式的判断以及一系列预定义处理

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'].includes(value)  
  }
 }
}