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

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

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

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

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

結(jié)果

 
    
hi,girl
 

不必在全局注冊(cè)每個(gè)組件。通過(guò)使用組件實(shí)例選項(xiàng)注冊(cè)，可以使組件僅在另一個(gè)實(shí)例/組件的作用域中可用：

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

當(dāng)我們感覺(jué)template里面寫(xiě)的東西太多了,我們還可以利用vue給我們提供的一個(gè)方法 x-template:

var Child = {
  template: "#a"
}

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

...

自定義組件 被認(rèn)為是無(wú)效的內(nèi)容，因此在渲染的時(shí)候會(huì)導(dǎo)致錯(cuò)誤。變通的方案是使用特殊的 is 屬性：

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

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

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

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

0 0 0

由于這三個(gè)組件共享了同一個(gè) data，因此增加一個(gè) counter 會(huì)影響所有組件！這不對(duì)。我們可以通過(guò)為每個(gè)組件返回全新的 data 對(duì)象來(lái)解決這個(gè)問(wèn)題：

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

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

0 0 0

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

如果我們定義了組件本身的屬性時(shí),我們需要 props 來(lái)注冊(cè)屬性,這樣我們才能利用屬性

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

結(jié)果

ffffd

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

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

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

var bus = new Vue()

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

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

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

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

如果你使用字符串模板，則沒(méi)有這些限制。

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

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

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

String

Number

Boolean

Function

Object

Array

Symbol

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

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

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

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

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

    
我是子組件的標(biāo)題
    
        只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。
    

父組件模板：

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

渲染結(jié)果：

  
我是父組件的標(biāo)題
  

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

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

父組件模板：

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

渲染結(jié)果為：

    

        
這里可能是一個(gè)頁(yè)面標(biāo)題
    
    

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

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