vue 組件高級用法實例詳解

1、遞歸組件

組件在它的模板內能夠遞歸地調用本身， 只要給組件設置name 的選項就能夠了。

示例以下：

<div id="app19">
   <my-component19 :count="1"></my-component19>
  </div>
Vue.component('my-component19',{
 name: 'my-component19', //其實當你利用 Vue.component 全局註冊了一個組件，全局的ID會被自動設置爲組件的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'
});
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提高思惟能力

渲染結果爲：

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

設置name 後，在組件模板內就能夠遞歸使用了，不過須要注意的是，必須給一個條件來限制遞歸數量，不然會拋出錯誤： max stack size exceeded 。

組件遞歸使用能夠用來開發一些具備未知層級關係的獨立組件，好比級聯選擇器和樹形控件等。

2、內聯模板

組件的模板通常都是在template 選項內定義的， Vue 提供了一個內聯模板的功能，在使用組件時，給組件標籤使用inline-template 特性，組件就會把它的內容看成模板，而不是把它當內容分發，這讓模板更靈活。

示例以下：

<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: '在子組件聲明的數據'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提高思惟能力

3、動態組件

Vue.js 提供了一個特殊的元素＜component> 用來動態地掛載不一樣的組件， 使用is特性來選擇要掛載的組件。

示例以下：

<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　　//動態地改變currentView的值就能夠動態掛載組件了。
  }
 },
 components: {
  comA: {
   template: '<div>組件A</div>'
  },
  comB: {
   template: '<div>組件B</div>'
  },
  comC: {
   template: '<div>組件C</div>'
  }
 }
});
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提高思惟能力

4、異步組件

當你的工程足夠大， 使用的組件足夠多時， 是時候考慮下性能問題了， 由於一開始把全部的組件都加載是不必的一筆開銷。

好在Vue.js 容許將組件定義爲一個工廠函數，動態地解析組件。Vue. 只在組件須要渲染時觸發工廠函數， 而且把結果緩存起來，用於後面的再次渲染。

<div id="app22">
      <my-component22></my-component22>
    </div>
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '<div>我是異步渲染的</div>'
    })
  },2000)
});
 
var app22 = new Vue({
  el: '#app22'
});

工廠函數接收一個resolve 回調，在收到從服務器下載的組件定義時調用。也能夠調用reject( reason ）指示加載失敗。 這裏setTimeout 只是爲了演示異步，具體的下載邏輯能夠本身決定，好比把組件配置寫成一個對象配置，經過Ajax 來請求，而後調用resolve 傳入配置選項。