vue 元件高階用法例項詳解
一、遞迴元件
元件在它的模板內可以遞迴地呼叫自己， 只要給元件設定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 。
元件遞迴使用可以用來開發一些具有未知層級關係的獨立元件，比如級聯選擇器和樹形控制元件等。
二、內聯模板
元件的模板一般都是在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經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力
三、動態元件
Vue.js 提供了一個特殊的元素＜component> 用來動態地掛載不同的元件， 使用is特性來選擇要掛載的元件。
示例如下：
<div id="app21">
<component :is="currentView">www.mhylpt.com</component>
<button @click="changeView('A')"www.mcyllpt.com>切換到A</button>
<button @click="changeView('B')www.michenggw.com">切換到B</button>
<button @click="changeView('www.dfgjpt.com C')www.gcyL157.com">切換到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經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力
四、非同步元件
當你的工程足夠大， 使用的元件足夠多時， 是時候考慮下效能問題了， 因為一開始把所有的元件都載入是沒必要的一筆開銷。
好在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 傳入配置選項。