vue 動(dòng)態(tài)組件用法示例小結(jié)
本文實(shí)例講述了vue 動(dòng)態(tài)組件用法。分享給大家供大家參考,具體如下:
通過使用保留的 <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 測試實(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 測試實(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>
說明:
初始情況下,vm.$children屬性中只有一個(gè)元素(first組件),
點(diǎn)擊按鈕切換后,vm.$children屬性中有兩個(gè)元素,
再次切換后,則有三個(gè)元素(三個(gè)子組件都保留在內(nèi)存中)。
之后無論如何切換,將一直保持有三個(gè)元素。
actived鉤子
可以延遲執(zhí)行當(dāng)前的組件。
具體用法來說,activate是和template、data等屬性平級的一個(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 測試實(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.起到了延遲加載的作用。
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
- vue3的動(dòng)態(tài)組件是如何工作的
- 深入了解Vue動(dòng)態(tài)組件和異步組件
- vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說明
- Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法
- vue學(xué)習(xí)筆記之動(dòng)態(tài)組件和v-once指令簡單示例
- VUE 動(dòng)態(tài)組件的應(yīng)用案例分析
- Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)
- Vue動(dòng)態(tài)組件和異步組件原理詳解
- vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼
- Vue動(dòng)態(tài)組件與異步組件實(shí)例詳解
- vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
相關(guān)文章
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06Vue3中實(shí)現(xiàn)網(wǎng)頁時(shí)鐘功能(顯示當(dāng)前時(shí)間并每秒更新一次)
本文將詳細(xì)介紹如何在Vue3中實(shí)現(xiàn)一個(gè)每秒鐘自動(dòng)更新的網(wǎng)頁時(shí)鐘,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07Vue中@click.stop與@click.prevent、@click.native使用
這篇文章主要介紹了Vue中@click.stop與@click.prevent、@click.native使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解
這篇文章主要介紹了Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09vue項(xiàng)目配置國際化$t('')的介紹和用法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置國際化?$t('')的介紹和用法的相關(guān)資料,多語言和國際化現(xiàn)在已經(jīng)成為一個(gè)網(wǎng)站或應(yīng)用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下2023-09-09el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09