vue 動(dòng)態(tài)組件用法示例小結(jié)
本文實(shí)例講述了vue 動(dòng)態(tài)組件用法。分享給大家供大家參考，具體如下：
通過(guò)使用保留的 <component> 元素，動(dòng)態(tài)地綁定到它的 is 特性，我們讓多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換。根據(jù) v-bind:is='組件名' 中的組件名去自動(dòng)匹配組件，如果匹配不到則不顯示。
改變掛載的組件，只需要修改is指令的值即可。
<!DOCTYPE html><html><head><meta charset='utf-8'><title>Vue 測(cè)試實(shí)例 - 動(dòng)態(tài)組件</title><script src='https://cdn.bootcss.com/vue/2.2.2/vue.min.js'></script></head><body><div id='app'> <button @click=’toShow’>點(diǎn)擊顯示子組件</button> <component v-bind:is='which_to_show'></component></div><script>// 創(chuàng)建根實(shí)例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<2){ 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></body></html>
#keep-alive
動(dòng)態(tài)切換掉的組件（非當(dāng)前顯示的組件）是被移除掉了，如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個(gè) keep-alive 指令參數(shù)：
<!DOCTYPE html><html><head><meta charset='utf-8'><title>Vue 測(cè)試實(shí)例 - 動(dòng)態(tài)組件</title><script src='https://cdn.bootcss.com/vue/2.2.2/vue.min.js'></script></head><body><div id='app'> <button @click=’toShow’>點(diǎn)擊顯示子組件</button> <!----或者<component v-bind:is='which_to_show' keep-alive></component>也行-----> <keep-alive> <component v-bind:is='which_to_show' ></component> </keep-alive></div><script>// 創(chuàng)建根實(shí)例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<2){ 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></body></html>
說(shuō)明：
初始情況下，vm.$children屬性中只有一個(gè)元素（first組件），
點(diǎn)擊按鈕切換后，vm.$children屬性中有兩個(gè)元素，
再次切換后，則有三個(gè)元素（三個(gè)子組件都保留在內(nèi)存中）。
之后無(wú)論如何切換，將一直保持有三個(gè)元素。
actived鉤子
可以延遲執(zhí)行當(dāng)前的組件。
具體用法來(lái)說(shuō)，activate是和template、data等屬性平級(jí)的一個(gè)屬性，形式是一個(gè)函數(shù)，函數(shù)里默認(rèn)有一個(gè)參數(shù)，而這個(gè)參數(shù)是一個(gè)函數(shù)，執(zhí)行這個(gè)函數(shù)時(shí)，才會(huì)切換組件。
<!DOCTYPE html><html><head><meta charset='utf-8'><title>Vue 測(cè)試實(shí)例 - 動(dòng)態(tài)組件</title><script src='https://cdn.bootcss.com/vue/2.2.2/vue.min.js'></script></head><body><div id='app'> <button @click=’toShow’>點(diǎn)擊顯示子組件</button> <!----或者<component v-bind:is='which_to_show' keep-alive></component>也行-----> <keep-alive> <component v-bind:is='which_to_show' ></component> </keep-alive></div><script>// 創(chuàng)建根實(shí)例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 < 2) { this.which_to_show = arr[index + 1];} else { this.which_to_show = arr[0];}console.log(this.$children); } }, components: { first: { //第一個(gè)子組件template: '<div>這里是子組件1</div>' }, second: { //第二個(gè)子組件template: '<div>這里是子組件2，這里是延遲后的內(nèi)容：{{hello}}</div>',data: function () { return { hello: '' }},activated: function (done) { //執(zhí)行這個(gè)參數(shù)時(shí)，才會(huì)切換組件 console.log(’hhh’) var self = this; var startTime = new Date().getTime(); // get the current time //兩秒后執(zhí)行 while (new Date().getTime() < startTime + 2000){ self.hello=’我是延遲后的內(nèi)容’; }} }, third: { //第三個(gè)子組件template: '<div>這里是子組件3</div>' } } });</script></body></html>
當(dāng)切換到第二個(gè)組件的時(shí)候，會(huì)先執(zhí)行activated鉤子，會(huì)在兩秒后顯示組件2.起到了延遲加載的作用。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. python基于openpyxl生成excel文件2. Python基于jieba, wordcloud庫(kù)生成中文詞云3. JS中6個(gè)對(duì)象數(shù)組去重的方法4. python利用蒙版摳圖(使用PIL.Image和cv2)輸出透明背景圖5. win10下opencv-python特定版本手動(dòng)安裝與pip自動(dòng)安裝教程6. 淺談JavaScript的對(duì)象類型之function7. Python web如何在IIS發(fā)布應(yīng)用過(guò)程解析8. 每日六道java新手入門面試題,通往自由的道路--多線程9. Python Sqlalchemy如何實(shí)現(xiàn)select for update10. Java下變量大小寫駝峰、大小寫下劃線、大小寫連線轉(zhuǎn)換
網(wǎng)公網(wǎng)安備