一、遞歸組件

組件在它的模板內(nèi)可以遞歸地調(diào)用自己， 只要給組件設(shè)置name 的選項(xiàng)就可以了。

示例如下：

  <div id="app19">   <my-component19 :count="1"></my-component19>  </div>Vue.component('my-component19',{ name: 'my-component19', //其實(shí)當(dāng)你利用 Vue.component 全局注冊(cè)了一個(gè)組件，全局的ID會(huì)被自動(dòng)設(shè)置為組件的name。 props: {  count: {   type: Number,   default: 1  } }, template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>'});var app19 = new Vue({ el: '#app19'});

渲染結(jié)果為：

 <div id="app19">  <div>   <div>    <div><!----></div>   </div>  </div> </div>

 設(shè)置name 后，在組件模板內(nèi)就可以遞歸使用了，不過(guò)需要注意的是，必須給一個(gè)條件來(lái)限制遞歸數(shù)量，否則會(huì)拋出錯(cuò)誤： max stack size exceeded 。

組件遞歸使用可以用來(lái)開(kāi)發(fā)一些具有未知層級(jí)關(guān)系的獨(dú)立組件，比如級(jí)聯(lián)選擇器和樹(shù)形控件等。

二、內(nèi)聯(lián)模板

組件的模板一般都是在template 選項(xiàng)內(nèi)定義的， Vue 提供了一個(gè)內(nèi)聯(lián)模板的功能，在使用組件時(shí)，給組件標(biāo)簽使用inline-template 特性，組件就會(huì)把它的內(nèi)容當(dāng)作模板，而不是把它當(dāng)內(nèi)容分發(fā)，這讓模板更靈活。

示例如下：     

<div id="app20">   <my-component20 inline-template>    <div>     <h3>在父組件中定義子組件的模板</h3>     <p>{{msg}}</p>    </div>   </my-component20>  </div>Vue.component('my-component20',{ data: function(){  return {   msg: '在子組件聲明的數(shù)據(jù)'  } }});var app20 = new Vue({ el: '#app20'});

三、動(dòng)態(tài)組件

Vue.js 提供了一個(gè)特殊的元素＜component> 用來(lái)動(dòng)態(tài)地掛載不同的組件， 使用is特性來(lái)選擇要掛載的組件。

示例如下：     

<div id="app21">   <component :is="currentView"></component>   <button @click="changeView('A')">切換到A</button>   <button @click="changeView('B')">切換到B</button>   <button @click="changeView('C')">切換到C</button>  </div>var app21 = new Vue({ el: '#app21', data: {  currentView: 'comA' }, methods: {  changeView: function(data){   this.currentView = 'com'+ data　　//動(dòng)態(tài)地改變currentView的值就可以動(dòng)態(tài)掛載組件了。  } }, components: {  comA: {   template: '<div>組件A</div>'  },  comB: {   template: '<div>組件B</div>'  },  comC: {   template: '<div>組件C</div>'  } }});

 四、異步組件

當(dāng)你的工程足夠大， 使用的組件足夠多時(shí)， 是時(shí)候考慮下性能問(wèn)題了， 因?yàn)橐婚_(kāi)始把所有的組件都加載是沒(méi)必要的一筆開(kāi)銷(xiāo)。