一：元件

1：先看官方文件

什麼是元件
元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。在較高層面上，元件是自定義元素，Vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以表現為用 is 特性進行了擴充套件的原生 HTML 元素。
所有的 Vue 元件同時也都是 Vue 的例項，所以可接受相同的選項物件 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。

2：元件形式

這裡主要說vue-cli中的元件
分兩種，全域性元件和區域性元件
全域性元件註冊在main.js
區域性元件註冊在vue例項裡面，用components呼叫

3：元件傳遞

元件例項中作用域是孤立的，所以需要資料傳遞

（1）父傳子

props
父元件中

<child message="hello"></child>

子元件

props:['message']

注：html特性不區分大小寫，props中大小寫須在父元件中轉換為kebab-case
動態prop
父元件

<child :my-message="hello"></child>

文件：
如果你想把一個物件的所有屬性作為 prop 進行傳遞，可以使用不帶任何引數的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個 todo 物件：

todo: {
  text: 'Learn Vue',
  isComplete: false
}

然後：

<todo-item v-bind="todo"></todo-item>

將等價於：

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

單向資料流
prop是單向繫結
父元件更新，子元件更新，不能在子元件更新
但是可以用子元件中定義區域性變數data或者computed來處理props
props驗證
文件

 props: {
    // 基礎型別檢測 (`null` 指允許任何型別)
    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 value > 10
      }
    }
  }

（2）子傳父

使用vue的自定義事件
vue例項都具有事件藉口
$on(eventName)監聽事件
$emit(eventName) 觸發事件
父元件

  <button-counter v-on:increment="incrementTotal"></button-counter>
 incrementTotal: function () {
      this.total += 1
    }

子元件

<button v-on:click="incrementCounter">{{ counter }}</button>
methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },

(3) 非父子元件通訊

使用一個空的vue例項

  var bus = new Vue();
  bus.$emit('id-selected',1);
  bus.$on('id-selected',function(id){

  })

(4)卡槽slot

官方文件：除非子元件模板包含至少一個 插口，否則父元件的內容將會被丟棄。當子元件模板只有一個沒有屬性的插槽時，父元件傳入的整個內容片段將插入到插槽所在的 DOM 位置，並替換掉插槽標籤本身。
最初在 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。
例：
my-Component 元件

<div>
  <h2>我是子元件的標題</h2>
  <slot>
    只有在沒有要分發的內容時才會顯示。
  </slot>
</div>

父元件

<div>
  <h1>我是父元件的標題</h1>
  <my-component>
    <p>這是一些初始內容</p>
    <p>這是更多的初始內容</p>
  </my-component>
</div>

渲染結果：

<div>
  <h1>我是父元件的標題</h1>
  <div>
    <h2>我是子元件的標題</h2>
    <p>這是一些初始內容</p>
    <p>這是更多的初始內容</p>
  </div>
</div>

(5)具名插槽

slot 可以用一個name配置
例子
app-layout元件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父元件模板：

<app-layout>
  <h1 slot="header">這裡可能是一個頁面標題</h1>

  <p>主要內容的一個段落。</p>
  <p>另一個主要段落。</p>

  <p slot="footer">這裡有一些聯絡資訊</p>
</app-layout>

渲染結果為：

<div class="container">
  <header>
    <h1>這裡可能是一個頁面標題</h1>
  </header>
  <main>
    <p>主要內容的一個段落。</p>
    <p>另一個主要段落。</p>
  </main>
  <footer>
    <p>這裡有一些聯絡資訊</p>
  </footer>
</div>