vue 組件高級用法實(shí)例詳解
一、遞歸組件
組件在它的模板內(nèi)可以遞歸地調(diào)用自己, 只要給組件設(shè)置name 的選項(xiàng)就可以了。
示例如下:
<div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其實(shí)當(dāng)你利用 Vue.component 全局注冊了一個組件,全局的ID會被自動設(shè)置為組件的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' });
渲染結(jié)果為:
<div id="app19"> <div> <div> <div><!----></div> </div> </div> </div>
設(shè)置name 后,在組件模板內(nèi)就可以遞歸使用了,不過需要注意的是,必須給一個條件來限制遞歸數(shù)量,否則會拋出錯誤: max stack size exceeded 。
組件遞歸使用可以用來開發(fā)一些具有未知層級關(guān)系的獨(dú)立組件,比如級聯(lián)選擇器和樹形控件等。
二、內(nèi)聯(lián)模板
組件的模板一般都是在template 選項(xiàng)內(nèi)定義的, Vue 提供了一個內(nèi)聯(lián)模板的功能,在使用組件時(shí),給組件標(biāo)簽使用inline-template 特性,組件就會把它的內(nèi)容當(dāng)作模板,而不是把它當(dāng)內(nèi)容分發(fā),這讓模板更靈活。
示例如下:
<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: '在子組件聲明的數(shù)據(jù)' } } }); var app20 = new Vue({ el: '#app20' });
三、動態(tài)組件
Vue.js 提供了一個特殊的元素<component> 用來動態(tài)地掛載不同的組件, 使用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 //動態(tài)地改變currentView的值就可以動態(tài)掛載組件了。 } }, components: { comA: { template: '<div>組件A</div>' }, comB: { template: '<div>組件B</div>' }, comC: { template: '<div>組件C</div>' } } });
四、異步組件
當(dāng)你的工程足夠大, 使用的組件足夠多時(shí), 是時(shí)候考慮下性能問題了, 因?yàn)橐婚_始把所有的組件都加載是沒必要的一筆開銷。
好在Vue.js 允許將組件定義為一個工廠函數(shù),動態(tài)地解析組件。Vue. 只在組件需要渲染時(shí)觸發(fā)工廠函數(shù), 并且把結(jié)果緩存起來,用于后面的再次渲染。
<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' });
工廠函數(shù)接收一個resolve 回調(diào),在收到從服務(wù)器下載的組件定義時(shí)調(diào)用。也可以調(diào)用reject( reason )指示加載失敗。
這里setTimeout 只是為了演示異步,具體的下載邏輯可以自己決定,比如把組件配置寫成一個對象配置,通過Ajax 來請求,然后調(diào)用resolve 傳入配置選項(xiàng)。
總結(jié)
以上所述是小編給大家介紹的vue 組件高級用法實(shí)例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
有關(guān)vue 開發(fā)釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問題及快速解決方案
這篇文章主要介紹了有關(guān)vue 開發(fā)的釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問題及快速解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05vue3前端實(shí)現(xiàn)微信支付詳細(xì)步驟
這篇文章主要給大家介紹了vue3前端實(shí)現(xiàn)微信支付的詳細(xì)步驟,隨著移動端的普及和互聯(lián)網(wǎng)購買需求的增加,微信支付在電商領(lǐng)域中發(fā)揮著越來越重要的作用,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08vue實(shí)現(xiàn)用戶長時(shí)間不操作自動退出登錄功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue實(shí)現(xiàn)用戶長時(shí)間不操作自動退出登錄功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07uniapp組件uni-file-picker中對上傳的圖片進(jìn)行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項(xiàng)目時(shí),用的uni-file-picker組件,這是我做的一個項(xiàng)目實(shí)例,主要是將圖片通過接口傳至后臺服務(wù)器,本文給大家分享uniapp組件uni-file-picker中對上傳的圖片進(jìn)行壓縮再上傳,感興趣的朋友跟隨小編一起看看吧2022-11-11多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03