DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Vuejs第十二篇之動態組件全面解析
Vuejs第十二篇之動態組件全面解析
編輯:關於JavaScript     

什麼是組件?

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

本篇資料是小編參考官方文檔的基礎上整理的一篇更加細致的說明,代碼更多更全,非常適合新手學習。

官方文檔:

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

動態組件介紹如下所示:

①簡單來說:

就是幾個組件放在一個掛載點下,然後根據父組件的某個變量來決定顯示哪個,或者都不顯示。

②動態切換:

在掛載點使用component標簽,然後使用v-bind:is=”組件名”,會自動去找匹配的組件名,如果沒有,則不顯示;

改變掛載的組件,只需要修改is指令的值即可。

如示例代碼:

<div id="app"> 
<button @click="toshow">點擊讓子組件顯示</button> 
<component v-bind:is="which_to_show"></component> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
which_to_show: "first" 
}, 
methods: { 
toshow: function () { //切換組件顯示 
var arr = ["first", "second", "third", ""]; 
var index = arr.indexOf(this.which_to_show); 
if (index < 3) { 
this.which_to_show = arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
} 
}, 
components: { 
first: { //第一個子組件 
template: "<div>這裡是子組件1</div>" 
}, 
second: { //第二個子組件 
template: "<div>這裡是子組件2</div>" 
}, 
third: { //第三個子組件 
template: "<div>這裡是子組件3</div>" 
}, 
} 
}); 
</script> 

說明:

點擊父組件的按鈕,會自動切換顯示某一個子組件(根據which_to_show這個變量的值來決定)。

③keep-alive

簡單來說,被切換掉(非當前顯示)的組件,是直接被移除了。
在父組件中查看this.$children屬性,可以發現,當子組件存在時,該屬性的length為1,而子組件不存在時,該屬性的length是0(無法獲取到子組件);

假如需要子組件在切換後,依然需要他保留在內存中,避免下次出現的時候重新渲染。那麼就應該在component標簽中添加keep-alive屬性。

如代碼:

<div id="app"> 
<button @click="toshow">點擊讓子組件顯示</button> 
<component v-bind:is="which_to_show" keep-alive></component> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
which_to_show: "first" 
}, 
methods: { 
toshow: function () { //切換組件顯示 
var arr = ["first", "second", "third", ""]; 
var index = arr.indexOf(this.which_to_show); 
if (index < 3) { 
this.which_to_show = arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
console.log(this.$children); 
} 
}, 
components: { 
first: { //第一個子組件 
template: "<div>這裡是子組件1</div>" 
}, 
second: { //第二個子組件 
template: "<div>這裡是子組件2</div>" 
}, 
third: { //第三個子組件 
template: "<div>這裡是子組件3</div>" 
}, 
} 
}); 
</script> 

說明:

初始情況下,vm.$children屬性中只有一個元素(first組件),點擊按鈕切換後,vm.$children屬性中有兩個元素,再次切換後,則有三個元素(三個子組件都保留在內存中)。

之後無論如何切換,將一直保持有三個元素。

④activate鉤子

簡單來說,他是延遲加載。

例如,在發起ajax請求時,會需要等待一些時間,假如我們需要在ajax請求完成後,再進行加載,那麼就需要用到activate鉤子了。

具體用法來說,activate是和template、data等屬性平級的一個屬性,形式是一個函數,函數裡默認有一個參數,而這個參數是一個函數,執行這個函數時,才會切換組件。

為了證明他的延遲加載性,在服務器端我設置當發起某個ajax請求時,會延遲2秒才返回內容,因此,第一次切換組件2時,需要等待2秒才會成功切換:

<div id="app"> 
<button @click="toshow">點擊讓子組件顯示</button> 
<component v-bind:is="which_to_show"></component> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
which_to_show: "first" 
}, 
methods: { 
toshow: function () { //切換組件顯示 
var arr = ["first", "second", "third", ""]; 
var index = arr.indexOf(this.which_to_show); 
if (index < 3) { 
this.which_to_show = arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
console.log(this.$children); 
} 
}, 
components: { 
first: { //第一個子組件 
template: "<div>這裡是子組件1</div>" 
}, 
second: { //第二個子組件 
template: "<div>這裡是子組件2,這裡是ajax後的內容:{{hello}}</div>", 
data: function () { 
return { 
hello: "" 
} 
}, 
activate: function (done) { //執行這個參數時,才會切換組件 
var self = this; 
$.get("/test", function (data) { //這個ajax我手動在服務器端設置延遲為2000ms,因此需要等待2秒後才會切換 
self.hello = data; 
done(); //ajax執行成功,切換組件 
}) 
} 
}, 
third: { //第三個子組件 
template: "<div>這裡是子組件3</div>" 
} 
} 
}); 
</script> 

代碼效果:

【1】第一次切換到組件2時,需要等待2秒後才能顯示(因為發起ajax);

【2】在有keep-alive的情況下,第二次或之後切換到組件2時,無需等待;但ajax內容,需要在第一次發起ajax兩秒後才會顯示;

【3】在無keep-alive的情況下(切換掉後沒有保存在內存中),第二次切換到組件2時,依然需要等待。

【4】等待時,不影響再次切換(即等待組件2的時候,再次點擊切換,可以直接切換到組件3);

說明:

【1】只有在第一次渲染組件時,才會執行activate,且該函數只會執行一次(在第一次組件出現的時候延遲組件出現)

【2】沒有keep-alive時,每次切換組件出現都是重新渲染(因為之前隱藏時執行了destroy過程),因此會執行activate方法。

⑤transition-mode過渡模式

簡單來說,動態組件切換時,讓其出現動畫效果。(還記不記得在過渡那一節的說明,過渡適用於動態組件)
默認是進入和退出一起完成;(可能造成進入的內容出現在退出內容的下方,這個下方指y軸方面偏下的,等退出完畢後,進入的才會出現在正確的位置);

transition-mode=”out-in”時,動畫是先出後進;
transition-mode=”in-out”時,動畫是先進後出(同默認情況容易出現的問題);

示例代碼:(使用自定義過渡名和animate.css文件)

<div id="app"> 
<button @click="toshow">點擊讓子組件顯示</button> 
<component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component> 
</div> 
<script> 
Vue.transition("bounce", { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
which_to_show: "first" 
}, 
methods: { 
toshow: function () { //切換組件顯示 
var arr = ["first", "second", "third", ""]; 
var index = arr.indexOf(this.which_to_show); 
if (index < 3) { 
this.which_to_show = arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
} 
}, 
components: { 
first: { //第一個子組件 
template: "<div>這裡是子組件1</div>" 
}, 
second: { //第二個子組件 
template: "<div>這裡是子組件2,這裡是ajax後的內容:{{hello}}</div>", 
data: function () { 
return { 
hello: "" 
} 
} 
}, 
third: { //第三個子組件 
template: "<div>這裡是子組件3</div>" 
} 
} 
}); 
</script> 

以上所述是小編給大家介紹的Vuejs第十二篇之動態組件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved