摘要：組件上一篇的表單輸入綁定使用組件注冊(cè)組件首先我們要?jiǎng)?chuàng)建一個(gè)實(shí)例要注冊(cè)一個(gè)全局組件，你可以使用。使用傳遞數(shù)據(jù)組件實(shí)例的作用域是孤立的。這意味著不能也不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

首先我們要?jiǎng)?chuàng)建一個(gè)實(shí)例：

new Vue({
    el:".exp",
    // ......
})

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

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

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

渲染結(jié)果：

    
這是一個(gè)組件

對(duì)于自定義標(biāo)簽名，Vue.js 不強(qiáng)制要求遵循 W3C 規(guī)則 (小寫，并且包含一個(gè)短杠)，盡管遵循這個(gè)規(guī)則比較好。

我們知道，在創(chuàng)建的實(shí)例里面是有data數(shù)據(jù)的，其實(shí)在組件里也可以寫數(shù)據(jù)：

Vue.component("my-component"{
    templent:"
",
    data:function(){
        return{
            msg:"hello"
        }
    }
})

注意！組件里的data必須是一個(gè)函數(shù)，并將屬性返回

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

渲染結(jié)果和上一個(gè)例子是一樣的。

我們來(lái)看看全局注冊(cè)和局部注冊(cè)的區(qū)別：

局部注冊(cè)的組件，只能在 .exp1 內(nèi)使用，拿給 .exp 是不可以的，當(dāng)然我們把全局注冊(cè)的組件給 .exp1 ，是可以生效的。

當(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)部。

比如：

如上，這樣的寫法在DOM里渲染時(shí)會(huì)反正錯(cuò)誤：

...

為了解決，就需要使用 is 屬性

有時(shí)候我們可能要在組件里寫很多的標(biāo)簽，如果統(tǒng)統(tǒng)像上面那樣寫的話，看起來(lái)很費(fèi)勁，這時(shí)候就可以使用模板字符串：

< script type="text/x-template" >< /script >

這樣寫的話就比較直觀了。

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

子組件要顯式地用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)：

在上面的例子中，我們要在子組件 tk 里傳一個(gè)參數(shù)，就需要使用 prop 屬性.

這種方式是靜態(tài)綁定的方法，還有就是利用 v-bind 指令進(jìn)行動(dòng)態(tài)綁定：

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

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

每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface)，即：

$on(enentName) 監(jiān)聽(tīng)事件

$emit(eventName) 觸發(fā)事件

我們可以使用 $emit 來(lái)用子組件觸發(fā)父組件的事件：

當(dāng)我們點(diǎn)擊第二個(gè)按鈕時(shí)，就會(huì)觸發(fā)父組件內(nèi)的 alert 事件。

其實(shí)我們也可以傳遞參數(shù)，由父組件接收：

 this.$emit("jieshou","abc")

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

這部分官方文檔說(shuō)的有點(diǎn)啰嗦，我這邊就合到一塊說(shuō)吧。直接上個(gè)例子：

    

    

        
            
Slot內(nèi)容分發(fā)

            
為了讓組件可以組合，我們需要一種方式來(lái)混合父組件的內(nèi)容與子組件自己的模板。這個(gè)過(guò)程被稱為 內(nèi)容分發(fā) (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實(shí)現(xiàn)了一個(gè)內(nèi)容分發(fā) API，參照了當(dāng)前 Web 組件規(guī)范草案，使用特殊的  元素作為原始內(nèi)容的插槽。
            
分發(fā)完成
        
    

    
    

< slot >被成為插口，在組件中，我們需要使用 slot 插口預(yù)留一個(gè)位置，以方便分發(fā)內(nèi)容。如上，在放置正文內(nèi)容的地方，我們直接插入一對(duì) slot 標(biāo)簽標(biāo)記出正文內(nèi)容的位置。對(duì)于頁(yè)面標(biāo)題和頁(yè)腳等特殊的位置，我們就需要"具名Slot"，用一個(gè)特殊的屬性 name 來(lái)配置如何分發(fā)內(nèi)容。多個(gè) slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素。

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...