vue 組件高級用法實例詳解
一、遞歸組件
組件在它的模板內(nèi)可以遞歸地調(diào)用自己, 只要給組件設(shè)置name 的選項就可以了。
示例如下:
<div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其實當你利用 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)系的獨立組件,比如級聯(lián)選擇器和樹形控件等。
二、內(nèi)聯(lián)模板
組件的模板一般都是在template 選項內(nèi)定義的, Vue 提供了一個內(nèi)聯(lián)模板的功能,在使用組件時,給組件標簽使用inline-template 特性,組件就會把它的內(nèi)容當作模板,而不是把它當內(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>' } } });
四、異步組件
當你的工程足夠大, 使用的組件足夠多時, 是時候考慮下性能問題了, 因為一開始把所有的組件都加載是沒必要的一筆開銷。
好在Vue.js 允許將組件定義為一個工廠函數(shù),動態(tài)地解析組件。Vue. 只在組件需要渲染時觸發(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ù)器下載的組件定義時調(diào)用。也可以調(diào)用reject( reason )指示加載失敗。
這里setTimeout 只是為了演示異步,具體的下載邏輯可以自己決定,比如把組件配置寫成一個對象配置,通過Ajax 來請求,然后調(diào)用resolve 傳入配置選項。
總結(jié)
以上所述是小編給大家介紹的vue 組件高級用法實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(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í)行問題及快速解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
這篇文章主要介紹了vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07uniapp組件uni-file-picker中對上傳的圖片進行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項目時,用的uni-file-picker組件,這是我做的一個項目實例,主要是將圖片通過接口傳至后臺服務(wù)器,本文給大家分享uniapp組件uni-file-picker中對上傳的圖片進行壓縮再上傳,感興趣的朋友跟隨小編一起看看吧2022-11-11多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03