从今天开始使用markdown编辑。
全局注册（注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中）
Vue.component('component-a', {/* ... */})
newVue({el:'#app'})
全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
局部注册（局部注册的组件在其子组件中不可用）
varComponentA = {/* ... */}
newVue({
el:'#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
Prop
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
//js
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
//html
<blog-post post-title="hello!"></blog-post>
以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
//JS
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
传递静态或动态Prop
静态的prop值：
<blog-post title="Vue work"></blog-post>
动态的prop可以通过v-bind赋值
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。
<blog-post v-bind:likes="42"></blog-post>
<blog-post v-bind:likes="post.likes"></blog-post>
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post v-bind:is-published="false"></blog-post>
<blog-post v-bind:is-published="post.isPublished"></blog-post>
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post>
<blog-post v-bind:author="post.author"></blog-post>
post: {
id: 1,
title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>
单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。
(1) 这个prop用来传递一个初始值；这个子组件接下来希望将其作为本地的prop数据来使用。
//最好定义一个本地的 data 属性并将这个 prop 用作其初始值
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
（2）这个 prop 以一种原始的值传入且需要进行转换
//最好使用这个 prop 的值来定义一个计算属性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
prop 验证
可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组
Vue.component('my-component'，{
prop：{
//基础的类型检查（null匹配任何类型）
propA：Number,
//多个可能的类型
propB:[String,Number],
//必填的字符串
propC:{
//type 取值：String、Number、Boolean、Array、Object、Date、Function、Symbol
type:String,
required:true
}
//带有默认值的数字
}
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
当type是function时，这样用
funtion Person(firstname,lastName){
this.firstName = firatName;
this.lastName = lastName;
}
//使用方法
Vue.component('blog-post',{
props:{
author:Person
}
})
不希望组件的根元素继承特性，在组件的选项中设置 inheritAttrs: false
