vue中的組件

什麼是組件

組件(Component)是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層麵上，組件是自定義元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展

使用組件

注冊

我們可以通過以下方式創建一個Vue實例：

new Vue({
  el: '#some-element',
  // 選項
})

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

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

對於自定義標簽名，Vue.js不強製要求遵循W3C規則(小寫，並且包含一個短杠)，盡量遵循這個規則比較好

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

<div >
    <my-component></my-component>
</div>
//注冊
Vue.component('my-component',{
    template:'<div>A custom component!</div>'
})
//創建根實例
new Vue({
    el:'#example'
})

渲染為：

<div >
    <div>A custom component!</div>
</div>

局部注冊

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

var Child = {
    template:'<div>A custom component!</div>'
}
new Vue({
    components:{
        // <my-component> 將隻在父模板可用
        'my-component':Child
    }
})

這種封裝也適用於其它可注冊的 Vue 功能，如指令

DOM模板解析說明

當使用DOM作為模版時(例如，將el選項掛載到一個已存在的元素上),你會受到HTML的一些限製，因為Vue隻在瀏覽器解析和標準化HTML後才能獲取模版內容。尤其像這些元素

在自定義組件中使用這些受限製的元素時會導致一些問題，例如：

<table>
    <my-row>...</my-row>
</table>

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

<table>
    <tr is="my-row">...</tr>
</table>

注意:如果使用來自以下來源之一的字符串模板，這些限製將不適用：

JavaScript內聯模版字符串
.vue 組件

因此，有必要的話請使用字符串模版

data必須是函數

通過Vue構造器傳入的各種選項大多數都可以在組件裏用；data是一個例外，它必須是函數；實際上，如果你這麼做：

Vue.component('my-component', {
    template: '<span>{{ message }}</span>',
    data: {
        message: 'hello'
    }
})

那麼Vue會停止並在控製台發出警告，告訴你在組件中data必須是一個函數。理解這種規則的存在意義很有幫助，讓我們假設用如下方式來繞開Vue的警告：

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

構成組件

組件意味著協同工作，通常父子組件的關係：組件A在它的模版中使用了組件B。它們之間必然需要相互通信:父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。然而在一個良好定義的接口中盡可能將父子組件解耦是很重要的,這保證了每個組件可以在相對隔離的環境中書寫和理解，也大幅提高了組件的可維護性和可重用性

Vue中，父子組件的關係可以總結為props down、events up;父組件通過 props 向下傳遞數據給子組件，子組件通過events 給父組件發送消息

prop

使用prop傳遞數據

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

子組件要顯式地用props選項聲明它期待獲得的數據：

Vue.component('child', {  
    props: ['message'],// 聲明 props
    // 就像data一樣prop可以用在模板內，同樣也可以在vm實例中像“this.message”這樣使用
    template: '<span>{{ message }}</span>'
})

然後我們可以這樣向它傳入一個普通字符串：

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

camelCase vs. kebab-case

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

<script>
Vue.component('child', {  
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
})
</script>
<child my-message="hello!"></child>

如果使用字符串模版，則沒有這些限製

動態Prop

模板中要動態地綁定父組件的數據到子模板的props，與綁定到任何普通的HTML特性相類似，就是用v-bind。每當父組件的數據變化時，該變化也會傳導給子組件：

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

字麵量語法 vs 動態語法

初學者常犯的一個錯誤是使用字麵量語法傳遞數值：

<comp some-prop="1"></comp><!-- 傳遞了一個字符串 "1" -->

因為它是一個字麵prop，它的值是字符串"1"而不是number。如果想傳遞一個實際的number需要用v-bind從而讓它的值被當作JS表達式計算：

<comp :some-prop="1"></comp><!-- 傳遞實際的 number -->

單向數據流

prop是單向綁定的：當父組件的屬性變化時將傳導給子組件，但不會反過來。這是為了防止子組件無意修改了父組件的狀態—這會讓應用的數據流難以理解。另外，每次父組件更新時子組件的所有prop都會更新為最新值。這意味著不應該在子組件內部改變prop。如果這麼做了，Vue會在控製台給出警告

為什麼我們會有修改prop中數據的衝動呢？通常是這兩種原因：

1.prop作為初始值傳入後，子組件想把它當作局部數據來用；

2.prop作為初始值傳入，由子組件處理成其它數據輸出

對這兩種原因，正確的應對方式是：

1.定義一個局部變量，並用prop的值初始化它：

props: ['initialCounter'],
data: function(){
    return { counter: this.initialCounter }
}

2.定義一個計算屬性，處理 prop 的值並返回

props: ['size'],
computed: {
    normalizedSize: function () {
        return this.size.trim().toLowerCase()
    }
}

注意:在JavaScript中對象和數組是引用類型，指向同一個內存空間，如果prop是一個對象或數組，在子組件內部改變它會影響父組件的狀態

Prop驗證

可以為組件的props指定驗證規格。如果傳入的數據不符合規格Vue會發出警告。當組件給其他人使用時，這很有用

要指定驗證規格，需要用對象的形式，而不能用字符串數組：

Vue.component('example',{
    props:{
        propA:Number, // 基礎類型檢測 (`null` 意思是任何類型都可以)
        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
            }
        }
    }
})

type可以是原生構造器：String、Number、Boolean、Function、Object、Array、Symbol。type也可以是一個自定義構造器函數，使用instanceof 檢測

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

非Prop屬性

所謂非prop屬性，就是它可以直接傳入組件而不需要定義相應的prop。明確給組件定義prop是傳參的推薦方式，但組件的作者並不總能預見到組件被使用的場景。所以，組件可以接收任意傳入的屬性，這些屬性都會被添加到組件的根元素上

例如：第三方組件bs-date-input，當它要和一個Bootstrap插件互操作時需要在這個第三方組件的input上添加data-3d-date-picker屬性，這時可以把屬性直接添加到組件上(不需要事先定義prop)：

<bs-date-input data-3d-date-picker="true"></bs-date-input>

添加屬性data-3d-date-picker="true" 之後，它會被自動添加到bs-date-input的根元素上

替換/覆蓋現有的特性

假定這是bs-date-input的模板：

<input type="date" >

為了給該日期選擇器插件增加一個特殊的主題，我們可能需要增加一個特殊的class，比如：

<bs-date-input data-3d-date-picker="true" ></bs-date-input>

在這個case當中，我們定義了兩個不一樣的class的值：form-control，來自組件的模板；date-picker-theme-dark，從父組件傳進來的

對於多數特性來說，傳遞給組件的值會覆蓋組件本身設定的值且有可能破壞該組件！索性我們對待class和style特性會把這兩個特性的值做合並(merge)操作，讓最終生成的值為：form-control date-picker-theme-dark

自定義事件

我們知道父組件是使用props傳遞數據給子組件，但子組件怎麼跟父組件通信呢？這個時候Vue的自定義事件係統就派得上用場了

使用v-on綁定自定義事件

每個Vue實例都實現了事件接口(Events interface)，即：用$on(eventName)監聽事件；用$emit(eventName)觸發事件

Vue的事件係統分離自瀏覽器的EventTarget API。盡管它們的運行類似，但是$on和$emit不是addEventListener和dispatchEvent的別名

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件

不能用$on偵聽子組件拋出的事件，而必須在模板裏直接用v-on綁定，就像以下的例子：

<div >
    <p>{{total}}</p>
    <button-counter @increment="incrementTotal"></button-counter>
    <button-counter @increment="incrementTotal"></button-counter>
</div>
<script>
Vue.component('button-counter',{
    template:'<button @click="incrementCounter">{{counter}}</button>',
    data:function(){
        return{ counter:0 }
    },
    methods:{
        incrementCounter:function(){
            this.counter += 1
            this.$emit('increment')
        }
    },    
})
new Vue({
    el:'#counter-event-example',
    data:{
        total:0
    },
    methods:{
        incrementTotal:function(){
            this.total += 1
        }
    }
})
</script>

本例中子組件已經和它外部完全解耦,它所做的隻是報告自己的內部事件，至於父組件是否關心則與它無關

給組件綁定原生事件

有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用.native修飾v-on。例如：

<my-component v-on:click.native="doTheThing"></my-component>

.sync修飾符

在vue 1.x中.sync實現了對prop 進行『雙向綁定』的功能，但是他破壞了單向數據流的假設，光看子組件的代碼時完全不知道它何時改變了父組件的狀態，增加維護成本；所以在2.0中.sync被移除；但2.0發布後的實際應用中，我們發現.sync還是有其適用之處，於是從2.3.0我們重新引入了.sync修飾符，但這次隻作為一個編譯時的語法糖存在，它會被擴展為一個自動更新父組件屬性的v-on偵聽器，如下：

<comp :foo.sync="bar"></comp>

會被擴展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)

使用自定義事件的表單輸入組件

自定義事件可以用來創建自定義的表單輸入組件，使用 v-model 來進行數據雙向綁定。看看這個：

<input v-model="something">

這是以下示例的語法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以在組件中使用時，它相當於下麵的簡寫：

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

所以要讓組件的v-model生效，應該(在2.2.0+這是可配置的)：接受一個value屬性,在有新值時觸發input事件

我們來看一個非常簡單的貨幣輸入的自定義控件：

<currency-input v-model="price"></currency-input>
<script>
Vue.component('currency-input',{
    template:'<span><input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>'
    props:['value'],
    methods:{
        updateValue:function(value){
            var formattedValue = value.trim().slice(0,value.indexof('.') === -1 ? value.length : value.indexof('.') + 3 )
            if(formattedValue !== value){
                this.$refs.input.value = formattedValue
            }
            this.$emit('input',Number(formattedValue))
        }
    }
})
</script>

定製組件的 v-model

默認一個組件的v-model會用value屬性和input事件，但如單選框、複選框之類的輸入類型可能把value屬性用作了別的目的。model選項可以回避這樣的衝突：

<my-checkbox v-model="foo" value="some value"></my-checkbox>
<script>
Vue.component('my-checkbox', {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: Boolean,
        value: String
    },
    // ...
})
</script>

上述代碼等價於：

<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox>

注意仍然需要顯性聲明checked屬性

非父子組件通信

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

var bus = new Vue()
bus.$emit('id-selected', 1) // 觸發組件 A 中的事件
bus.$on('id-selected', function (id) { // 在組件 B 創建的鉤子中監聽事件
  // ...
})

在複雜的情況下，我們應該考慮使用專門的狀態管理模式

使用slot分發內容

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

<app>
    <app-header></app-header>
    <app-footer></app-footer>
</app>

注意兩點：

1.組件不知道它會收到什麼內容。這是由使用的父組件決定的

2.組件很可能有它自己的模版

為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為內容分發(或 “transclusion” )。Vue.js實現了一個內容分發API，參照了當前 Web組件規範草案，使用特殊的元素作為原始內容的插槽

編譯作用域

在深入內容分發API之前，我們先明確內容在哪個作用域裏編譯。假定模板為：

<child-component> {{ message }} </child-component>

message應該綁定到父組件的數據。組件作用域簡單地說是：父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法：

<child-component v-show="someChildProperty"></child-component><!-- 無效 -->

假定someChildProperty 是子組件的屬性,上例不會如預期那樣工作;父組件模板不應該知道子組件的狀態。如要綁定作用域內的指令到一個組件的根節點應在組件自己的模板上做：

Vue.component('child-component', {  
  template: '<div v-show="someChildProperty">Child</div>', // 有效，因為是在正確的作用域內
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

類似地，分發內容是在父作用域內編譯

單個slot

除非子組件模板包含至少一個插口,否則父組件的內容將會被丟棄;當子組件模板隻有一個沒屬性的slot時,父組件整個內容片段將插入到slot所在的DOM位置並替換掉slot標簽本身.最初在標簽中的任何內容都被視為備用內容,備用內容在子組件的作用域內編譯,並且隻有在宿主元素為空且沒有要插入的內容時才顯示備用內容

假定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>

具名 Slot

元素可以用一個特殊的屬性name來配置如何分發內容。多個slot可以有不同的名字。具名slot將匹配內容片段中有對應slot特性的元素。仍然可以有一個匿名slot，它是默認 slot，作為找不到匹配的內容片段的備用插槽。如果沒有默認的slot，這些找不到匹配的內容片段將被拋棄。

例如，假定我們有一個 app-layout 組件，它的模板為：

<div >
  <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 >
  <header>
    <h1>這裏可能是一個頁麵標題</h1>
  </header>
  <main>
    <p>主要內容的一個段落。</p>
    <p>另一個主要段落。</p>
  </main>
  <footer>
    <p>這裏有一些聯係信息</p>
  </footer>
</div>

在組合組件時，內容分發 API 是非常有用的機製

作用域插槽

作用域插槽是一種特殊類型的插槽，用作使用一個(能夠傳遞數據到)可重用模板替換已渲染元素。在子組件中，隻需將數據傳遞到插槽，就像你將props傳遞給組件一樣：

<div >
  <slot text="hello from child"></slot>
</div>

在父級中，具有特殊屬性 scope 的元素必須存在，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象：

<div >
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

如果我們渲染以上結果，得到的輸出會是：

<div >
  <div >
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

作用域插槽更具代表性的用例是列表組件，允許組件自定義應該如何渲染列表每一項：

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <template slot="item" scope="props">
    <li >{{ props.text }}</li>
  </template>
</my-awesome-list>

列表組件的模板：

<ul>
  <slot name="item" v-for="item in items" :text="item.text"> <!-- 這裏寫入備用內容 --> </slot>
</ul>

動態組件

通過使用保留的元素動態地綁定到它的is特性，我們讓多個組件可以使用同一個掛載點，並動態切換：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
<component v-bind:is="currentView"> <!-- 組件在 vm.currentview 變化時改變！ --> </component>

也可以直接綁定到組件對象上：

var Home = {
  template: '<p>Welcome home!</p>'
}
var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

keep-alive

如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：

<keep-alive>
  <component :is="currentView"> <!-- 非活動組件將被緩存！ --> </component>
</keep-alive>

雜項

編寫可複用的組件

在編寫組件時留意是否要複用組件是有好處的。一次性組件跟其它組件緊密耦合沒關係，但是可複用組件應當定義一個清晰的公開接口。

Vue 組件的 API 來自三部分 - props, events 和 slots ：

Props 允許外部環境傳遞數據給組件

Events 允許從外部環境在組件內觸發副作用

Slots 允許外部環境將額外的內容組合在組件中

使用 v-bind 和 v-on 的簡寫語法，模板的縮進清楚且簡潔：

<my-component :foo="baz" :bar="qux" @event-a="doThis" @event-b="doThat">
  <img slot="icon" src="...">
  <p slot="main-text">Hello!</p>
</my-component>

子組件索引

盡管有props和events，但有時仍需要在JS中直接訪問子組件。為此可以使用ref為子組件指定一個索引ID。例如：

<div >
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile

當 ref 和 v-for 一起使用時，ref 是一個數組，包含相應的子組件

$refs隻在組件渲染完成後才填充，並且它是非響應式的。它僅僅作為一個直接訪問子組件的應急方案——應當避免在模板或計算屬性中使用$refs

異步組件

在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了讓事情更簡單，Vue.js允許將組件定義為一個工廠函數，動態地解析組件的定義。Vue.js隻在組件需要渲染時觸發工廠函數，並且把結果緩存起來，用於後麵的再次渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

工廠函數接收一個resolve回調，在收到從服務器下載的組件定義時調用。也可以調用reject(reason)指示加載失敗。這裏setTimeout隻是為了演示。怎麼獲取組件完全由你決定。推薦配合使用：Webpack的代碼分割功能：

Vue.component('async-webpack-example', function (resolve) {
  // 這個特殊的require語法告訴webpack，自動將編譯後的代碼分割成不同的塊，這些塊將通過Ajax請求自動下載。
  require(['./my-async-component'], resolve)
})

可以使用Webpack 2 + ES2015的語法返回一個Promise resolve函數：

Vue.component(
  'async-webpack-example',() => import('./my-async-component')
)

當使用局部注冊時，也可以直接提供一個返回Promise的函數：

new Vue({
  components: {
    'my-component': () => import('./my-async-component')
  }
})

如果是Browserify用戶,可能就無法使用異步組件了,它的作者已經表明Browserify不支持異步加載。Browserify社區發現一些解決方法，可能有助於已存在的複雜應用。對於其他場景，我們推薦簡單實用Webpack構建，一流的異步支持

高級異步組件

自 2.3.0 起，異步組件的工廠函數也可以返回一個如下的對象：

const AsyncComp = () => ({  
  component: import('./MyComp.vue'),  // 需要加載的組件. 應當是一個 Promise  
  loading: LoadingComp,  // loading 時應當渲染的組件  
  error: ErrorComp,  // 出錯時渲染的組件  
  delay: 200,  // 渲染 loading 組件前的等待時間。默認：200ms.  
  timeout: 3000  // 最長等待時間。超出此時間則渲染 error 組件。默認：Infinity
})

注意：當一個異步組件被作為vue-router的路由組件使用時，這些高級選項都是無效的，因為在路由切換前就會提前加載所需要的異步組件。另外，如果你要在路由組件中使用上述寫法，需要使用vue-router 2.4.0+

組件命名約定

當注冊組件 (或者 props) 時，可以使用 kebab-case，camelCase，或 PascalCase

components: {  // 在組件定義中
  'kebab-cased-component': { /* ... */ },  // 使用 kebab-case 形式注冊  
  'camelCasedComponent': { /* ... */ },  // register using camelCase  
  'PascalCasedComponent': { /* ... */ }  // register using PascalCase
}

在 HTML 模板中，請使用 kebab-case 形式：

<!-- 在HTML模板中始終使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

使用字符串模式時，可以不受HTML的case-insensitive限製。這意味實際上在模板中，可以使用下麵的方式來引用你的組件：

1.kebab-case

2.camelCase 或 kebab-case 如果組件已經被定義為 camelCase

3.kebab-case，camelCase 或 PascalCase 如果組件已經被定義為 PascalCase

components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>
<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>

這意味著PascalCase是最通用的聲明約定而kebab-case是最通用的使用約定。如果組件未經slot元素傳遞內容，你甚至可以在組件名後使用 / 使其自閉合：

<my-component/>

當然，這隻在字符串模板中有效。因為自閉的自定義元素是無效的 HTML，瀏覽器原生的解析器也無法識別它

遞歸組件

組件在它的模板內可以遞歸地調用自己，不過，隻有當它有 name 選項時才可以：

name: 'unique-name-of-my-component'

當你利用Vue.component全局注冊了一個組件, 全局的ID作為組件的 name 選項，被自動設置

Vue.component('unique-name-of-my-component', {
  // ...
})

如果你不謹慎, 遞歸組件可能導致死循環:

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

上麵組件會導致一個錯誤“max stack size exceeded”，所以要確保遞歸調用有終止條件 (比如遞歸調用時使用 v-if 並讓他最終返回 false )

組件間的循環引用

假設你正在構建一個文件目錄樹，像在Finder或文件資源管理器中。你可能有一個tree-folder組件:

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

然後一個tree-folder-contents組件：

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

仔細看，會發現在渲染樹上這兩個組件同時為對方的父節點和子節點–這點是矛盾的。當使用Vue.component將這兩個組件注冊為全局組件的時候，框架會自動為你解決這個矛盾，如果你是這樣做的，就不用繼續往下看了。
然而，如果你使用諸如Webpack或者Browserify之類的模塊化管理工具來requiring/importing組件的話，就會報錯了

為了解釋為什麼會報錯，簡單的將上麵兩個組件稱為A和B，模塊係統看到它需要A，但是首先A需要B，但是B需要A，而A需要B，陷入一個無限循環，因此不知道到底應該先解決哪個。要解決這個問題，我們需要在其中一個組件中(比如A)告訴模塊化管理係統，“A雖然需要B但是不需要優先導入B”

在例子中，我們選擇在tree-folder組件中來告訴模塊化管理係統循環引用的組件間的處理優先級，我們知道引起矛盾的子組件是tree-folder-contents，所以我們在beforeCreate 生命周期鉤子中去注冊它：

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

問題就解決了

內聯模板

如果子組件有inline-template特性，組件將把它的內容當作它的模板，而不是把它當作分發內容。這讓模板更靈活

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

但是inline-template讓模板的作用域難以理解。最佳實踐是使用template選項在組件內定義模板或者在.vue文件中使用template元素

X-Templates

另一種定義模板的方式是在 JavaScript 標簽裏使用 text/x-template 類型，並且指定一個 id。例如：

<script type="text/x-template" >
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

這在有很多模板或者小的應用中有用，否則應該避免使用，因為它將模板和組件的其他定義隔離了

對低開銷的靜態組件使用v-once

盡管在Vue中渲染HTML很快，不過當組件中包含大量靜態內容時，可以考慮使用v-once將渲染結果緩存起來，就像這樣：

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ... a lot of static content ...\
    </div>\
  '
})

最後更新：2017-09-11 12:02:42