Vue中通過Vue.extend動態(tài)創(chuàng)建實例的方法
在Vue中,如果我們想要動態(tài)地來控制一個組件的顯示和隱藏,比如通過點擊按鈕顯示一個對話框或者彈出一條信息。我們通常會提前寫好這個組件,然后通過v-if = “show”
來控制它的顯示隱藏。如下所示:
<div> <button @click = "show = !show">彈出</button> <span v-if = "show">這是一條通過按鈕控制顯示隱藏的信息</span> </div>
另外還有一種實現(xiàn)方法就是通過Vue.extend來動態(tài)地創(chuàng)建實例,在想要進行顯示的時候創(chuàng)建實例。
在需要隱藏的時候刪除這個實例。
1.通過Vue.extend
創(chuàng)建構(gòu)造器,這個構(gòu)造器用于需要顯示是創(chuàng)建實例。
const Constructor = Vue.extend({ template:` <span>{{message}}</span> `, data(){ return { message:'這是一條通過按鈕控制顯示隱藏的信息' } } }) 1.需要顯示時創(chuàng)建實例 showHandle(){ const MessageCom = this.MessageCom = new Constructor({ propsData:{ show:true } }).$mount(); this.$refs.message.appendChild(MessageCom.$el); } 1.需要隱藏時刪除實例 hiddenHandle(){ this.MessageCom.$el.remove() this.MessageCom.$destroy() this.MessageCom = null }
這樣的話就同樣實現(xiàn)了一個顯示,隱藏效果。
使用場景
通過上面的分析,我們發(fā)現(xiàn)這種操作完全沒有必要,相比于通過屬性來控制顯示和隱藏;創(chuàng)建實例顯得更加麻煩。
但是它同樣具有一定的使用場景。比如:單元測試時:
單元測試
在進行單元測試時,為了實現(xiàn)在Vue中的測試,我們必須創(chuàng)建一個基于某個組件的實例,然后才能進行測試。
如下所示:
it('可以設(shè)置icon.', () => { const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings' } }).$mount() const useElement = vm.$el.querySelector('use') expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings') vm.$destroy() })
替代DOM操作
在一些場合下,我們可能需要創(chuàng)建一個div這種,通常的實現(xiàn)方式如下:
let oDiv = document.createElement(); oDiv.innerHTML = 'hello,world'; document.body.appendChild(oDiv);
但是,在Vue中操作DOM是非常不推薦的寫法,這時候我們建議使用Vue.extend
來實現(xiàn)DOM的操作。
const Constructor = Vue.extend(Toast); let oDiv = new Constructor(); oDiv.$slots.default = [message]; oDiv.$mount(); //必須使用$mount()進行掛載,否則所有的生命周期的函數(shù)都不會執(zhí)行 document.body.appendChild(oDiv.$el)
總結(jié):
Vue.extend
可以用于動態(tài)地創(chuàng)建實例,在一些場景下可以使用。
以上所述是小編給大家介紹的Vue中通過Vue.extend動態(tài)創(chuàng)建實例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
手把手教你寫一個vue全局注冊的Toast的實現(xiàn)
本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-04在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03Vue data的數(shù)據(jù)響應式到底是如何實現(xiàn)的
這篇文章主要介紹了Vue data的數(shù)據(jù)響應式到底是如何實現(xiàn)的,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02Vue實現(xiàn)雙向綁定的原理以及響應式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的原理以及響應式數(shù)據(jù)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07