• 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
  
• 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
  
• 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
  
• 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
  
• 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。
  
• 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
  

   
   
var MyComponent = Vue.extend({
    //选项
})

   
   
Vue.component('my-component',MyComponent)

   
   
<div id = "example">
    <my-component></my-component>
</div>

   
   
<div id="example">
  <my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
  el: '#example'
})

   
   
<div id = "example">
    <div>A custom component!</div>
</div>

   
   
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> 只能用在父组件模板内
    'my-component': Child
  }
})

   
   
// 在一个步骤中扩展与注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
 
// 局部注册也可以这么做
var Parent = Vue.extend({
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

   
   
var MyComponent = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

• a 不能包含其它的交互元素（如按钮，链接）
  
• ul 和 ol 只能直接包含 li
  
• select 只能包含 option 和 optgroup
  
• table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
  
• tr 只能直接包含 th 和 td
  

    
    
<table>
  <tr is="my-component"></tr>
</table>
//<template> 不能用在 <table> 内，这时应使用 <tbody>，<table> 可以有多个 <tbody>
<table>
  <tbody v-for="item in items">
    <tr>Even row</tr>
    <tr>Odd row</tr>
  </tbody>
</table>

Props

    
    
<child msg="hello!"></child>

动态props

   
   
<div>
  <input v-model="parentMsg">
  <child v-bind:my-message="parentMsg"></child>
//<child :my-message="parentMsg"></child>
</div>

   
   
<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

• 使用 $on() 监听事件；
  
• 使用 $emit() 在它上面触发事件；
  
• 使用 $dispatch() 派发事件，事件沿着父链冒泡；
  
• 使用 $broadcast() 广播事件，事件向下传导给所有的后代。
  

   
   
<!-- 子组件模板 -->
<template id="child-template">
  <input v-model="msg">
  <button v-on:click="notify">Dispatch Event</button>
</template>
 
<!-- 父组件模板 -->
<div id="events-example">
  <p>Messages: {{ messages | json }}</p>
  <child></child>
</div>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch('child-msg', this.msg)
        this.msg = ''
      }
    }
  }
})
 
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
  el: '#events-example',
  data: {
    messages: []
  },
  // 在创建实例时 `events` 选项简单地调用 `$on`
  events: {
    'child-msg': function (msg) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.messages.push(msg)
    }
  }
})

 使用v-on绑定自定义事件

   
   
<child v-on:child-msg="handleIt"></child>

   
   
<div id="parent">
  <user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

    
    
<div>
  <h1>This is my component!</h1>
  <p>This is some original content</p>
  <p>This is some more original content</p>
</div>

具名slot

   
   
new Vue({
  el: 'body',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
<component :is="currentView">
  <!-- 组件在 vm.currentview 变化时改变 -->
</component>

   
   
<component :is="currentView" keep-alive>
  <!-- 非活动组件将被缓存 -->
</component>

   
   
Vue.component('activate-example', {
  activate: function (done) {
    var self = this
    loadDataAsync(function (data) {
      self.someData = data
      done()
    })
  }
})

• in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
  
• out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。