摘要：它們之間必然需要相互通信父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這是由使用的父組件決定的。

要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component("my-component", {
  // 選項
})

組件在注冊之后，便可以在父實例的模塊中以自定義元素 < my-component >< /my-component > 的形式使用。要確保在初始化根實例之前注冊了組件：

// 注冊組件
Vue.component("my-component", {
    template: "
hi girl
"
})
// 創(chuàng)建根實例
new Vue({
    el: "#box"
})

結(jié)果

 
    
hi,girl
 

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

var Child = {
  template: "
A custom component!
"
}
new Vue({
  // ...
  components: {
    "my-component": Child
  }
})

當我們感覺template里面寫的東西太多了,我們還可以利用vue給我們提供的一個方法 x-template:

var Child = {
  template: "#a"
}

當使用 DOM 作為模板時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內(nèi)容。尤其像這些元素 < ul >，< ol >，< table >，< select > 限制了能被它包裹的元素，而一些像 < option > 這樣的元素只能出現(xiàn)在某些其它元素內(nèi)部。
在自定義組件中使用這些受限制的元素時會導致一些問題，例如：

...

自定義組件 被認為是無效的內(nèi)容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的 is 屬性：

通過 Vue 構(gòu)造器傳入的各種選項大多數(shù)都可以在組件里用。data 是一個例外，它必須是函數(shù)。實際上，如果你這么做：

Vue.component("my-component", {
  template: "{{ message }}",
  data: {
    message: "hello"
  }
})

那么 Vue 會停止，并在控制臺發(fā)出警告，告訴你在組件中 data 必須是一個函數(shù)。理解這種規(guī)則的存在意義很有幫助，讓我們假設(shè)用如下方式來繞開 Vue 的警告：

var data = { counter: 0 }
Vue.component("simple-counter", {
  template: "{{ counter }}",
  // 技術(shù)上 data 的確是一個函數(shù)了，因此 Vue 不會警告，
  // 但是我們返回給每個組件的實例卻引用了同一個 data 對象
  data: function () {
    return data
  }
})
new Vue({
  el: "#example-2"
})

0 0 0

由于這三個組件共享了同一個 data，因此增加一個 counter 會影響所有組件！這不對。我們可以通過為每個組件返回全新的 data 對象來解決這個問題：

data: function () {
  return {
    counter: 0
  }
}

現(xiàn)在每個 counter 都有它自己內(nèi)部的狀態(tài)了：

0 0 0

組件意味著協(xié)同工作，通常父子組件會是這樣的關(guān)系：組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件。然而，在一個良好定義的接口中盡可能將父子組件解耦是很重要的。這保證了每個組件可以在相對隔離的環(huán)境中書寫和理解，也大幅提高了組件的可維護性和可重用性。
在 Vue 中，父子組件的關(guān)系可以總結(jié)為 props down, events up。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。看看它們是怎么工作的。

如果我們定義了組件本身的屬性時,我們需要 props 來注冊屬性,這樣我們才能利用屬性

Vue.component("mycom",{
    template:"{{ msg }}",
    props:["a"],
    metods:{
        sss:function(){
            alert(this.a)
        }
    }
    })

結(jié)果

ffffd

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的 props 選項。

Vue.component("mycom",{
    template:"{{ msg }}",
    props:["a"],
    methods:{
        sss:function(){
            alert(this.a)
        }
    }
})
new Vue({
    el:"#box",
    data:{
        ffffd:"hi"
    }
})

結(jié)果

hi

Vue.component("mycom",{
    template:"{{ msg }}",
    props:["a"],
    methods:{
        sss:function(){
            this.$emit("fff")
        }
    }
})
new Vue({
    el:"#box",
    data:{
        ffffd:"hi"
    },
    methods:{
        gg:function(){
            alert(111)
        }
    }
})

結(jié)果

111

我們也可以在組件觸發(fā)的函數(shù)上傳入?yún)?shù)

Vue.component("mycom",{
    template:"{{ msg }}",
    props:["a"],
    methods:{
        sss:function(){
            this.$emit("fff","a","b")
        }
    }
})
new Vue({
    el:"#box",
    data:{
        ffffd:"hi"
    },
    methods:{
        gg:function(x,y){
            alert(x+y)
        }
    }
})

結(jié)果

ab

有時候兩個組件也需要通信 (非父子關(guān)系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：

var bus = new Vue()

// 觸發(fā)組件 A 中的事件
bus.$emit("id-selected", 1)

// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on("id-selected", function (id) {
  // ...
})

HTML 特性是不區(qū)分大小寫的。所以，當使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component("child", {
  // camelCase in JavaScript
  props: ["myMessage"],
  template: "{{ myMessage }}"
})

如果你使用字符串模板，則沒有這些限制。

我們可以為組件的 props 指定驗證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue 會發(fā)出警告。當組件給其他人使用時，這很有用。
要指定驗證規(guī)格，需要用對象的形式，而不能用字符串數(shù)組：

Vue.component("example", {
  props: {
    // 基礎(chǔ)類型檢測 (`null` 意思是任何類型都可以)
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組/對象的默認值應當由一個工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: "hello" }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生構(gòu)造器：

String

Number

Boolean

Function

Object

Array

Symbol

也可以是一個自定義構(gòu)造器函數(shù)，使用 instanceof 檢測。

當 prop 驗證失敗，Vue 會拋出警告 (如果使用的是開發(fā)版本)。注意 props 會在組件實例創(chuàng)建之前進行校驗，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實例屬性還無法使用。

在使用組件時，我們常常要像這樣組合它們：

注意兩點：
< app > 組件不知道它會收到什么內(nèi)容。這是由使用 < app > 的父組件決定的。
< app > 組件很可能有它自己的模板。
為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個過程被稱為 內(nèi)容分發(fā) (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實現(xiàn)了一個內(nèi)容分發(fā) API，參照了當前 Web 組件規(guī)范草案，使用特殊的 < slot > 元素作為原始內(nèi)容的插槽。

除非子組件模板包含至少一個 < slot > 插口，否則父組件的內(nèi)容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內(nèi)容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標簽本身。
最初在 < slot > 標簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒有要插入的內(nèi)容時才顯示備用內(nèi)容。
假定 my-component 組件有下面模板：

    
我是子組件的標題
    
        只有在沒有要分發(fā)的內(nèi)容時才會顯示。
    

父組件模板：

  
我是父組件的標題
  
    
這是一些初始內(nèi)容
    
這是更多的初始內(nèi)容
  

渲染結(jié)果：

  
我是父組件的標題
  

    
我是子組件的標題
    
這是一些初始內(nèi)容
    
這是更多的初始內(nèi)容
  

元素可以用一個特殊的屬性 name 來配置如何分發(fā)內(nèi)容。多個 slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對應 slot 特性的元素。
仍然可以有一個匿名 slot，它是默認 slot，作為找不到匹配的內(nèi)容片段的備用插槽。如果沒有默認的 slot，這些找不到匹配的內(nèi)容片段將被拋棄。
例如，假定我們有一個 app-layout 組件，它的模板為：

父組件模板：

  
這里可能是一個頁面標題
  
主要內(nèi)容的一個段落。
  
另一個主要段落。
  
這里有一些聯(lián)系信息

渲染結(jié)果為：

    

        
這里可能是一個頁面標題
    
    

        
主要內(nèi)容的一個段落。
        
另一個主要段落。
    
    

在組合組件時，內(nèi)容分發(fā) API 是非常有用的機制。