从今天开始使用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

深入了解组件