Vue中通過Vue.extend動態創建實例

seanHai 發布于2019-08-26 10:45 / 662人閱讀

摘要：中通過動態創建實例在中，如果我們想要動態地來控制一個組件的顯示和隱藏，比如通過點擊按鈕顯示一個對話框或者彈出一條信息。通過創建構造器這個構造器用于需要顯示是創建實例。

Vue中通過Vue.extend動態創建實例

在Vue中，如果我們想要動態地來控制一個組件的顯示和隱藏，比如通過點擊按鈕顯示一個對話框或者彈出一條信息。我們通常會提前寫好這個組件，然后通過v-if = “show”來控制它的顯示隱藏。如下所示：

    
        
        這是一條通過按鈕控制顯示隱藏的信息

另外還有一種實現方法就是通過Vue.extend來動態地創建實例，在想要進行顯示的時候創建實例。
在需要隱藏的時候刪除這個實例。

通過Vue.extend創建構造器,這個構造器用于需要顯示是創建實例。

const Constructor = Vue.extend({
    template:` {{message}} `,
    data(){
        return {
            message:"這是一條通過按鈕控制顯示隱藏的信息"
        }
    }
})

需要顯示時創建實例

showHandle(){
    const MessageCom = this.MessageCom = new Constructor({
        propsData:{
            show:true
        }
    }).$mount();

    this.$refs.message.appendChild(MessageCom.$el);
}

需要隱藏時刪除實例

hiddenHandle(){
    this.MessageCom.$el.remove()
    this.MessageCom.$destroy()
    this.MessageCom = null
}

這樣的話就同樣實現了一個顯示，隱藏效果。

使用場景

通過上面的分析，我們發現這種操作完全沒有必要，相比于通過屬性來控制顯示和隱藏；創建實例顯得更加麻煩。
但是它同樣具有一定的使用場景。比如：單元測試時：

單元測試

在進行單元測試時，為了實現在Vue中的測試，我們必須創建一個基于某個組件的實例，然后才能進行測試。
如下所示：

    it("可以設置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操作

在一些場合下，我們可能需要創建一個div這種，通常的實現方式如下：

let oDiv = document.createElement();
oDiv.innerHTML = "hello,world";
document.body.appendChild(oDiv);

但是，在Vue中操作DOM是非常不推薦的寫法，這時候我們建議使用Vue.extend來實現DOM的操作。

      const Constructor = Vue.extend(Toast);
      let oDiv = new Constructor();
      oDiv.$slots.default = [message];
      oDiv.$mount(); //必須使用$mount()進行掛載，否則所有的生命周期的函數都不會執行
      document.body.appendChild(oDiv.$el)

總結：

Vue.extend可以用于動態地創建實例，在一些場景下可以使用。

GPU云服務器云服務器動態創建實例 vue實例屬性實例創建 esc實例創建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106707.html

Vue.js基本語法的介紹

摘要：當表達式的值發生變化時，響應應用特定的行為到。指的是否重復，對重復的進行服用循環中，表示數組第個元素表示對象的樣式綁定樣式也可以根據中的變量來動態確定。介紹前段時間接觸到一個庫叫做Vue.js, 個人感覺很棒，所以整理了一篇博文做個介紹。Vue讀音/vju:/,和view類似。是一個數據驅動的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb...

Jensen 2019-08-21 10:48 評論0 收藏0
【Vue實例】

摘要：的介紹就直接連接到官網了，官網介紹很詳細了介紹構造函數在使用之前我們首先需要構建實例以上代碼是通過構建了一個實例，構造函數中是一個對象，上面代碼我用了一個空的對象，對象中可以包含數據模板掛載元素方法生命周期鉤子等選項。使用過一段時間的vue1.0,現在vue已經更新了很多版本了，語法在很多地方也有了變化。在此記錄一下重新學習的過程以及對vue的一些自己的理解。vue的介紹就直接連接...

jerryloveemily 2019-08-20 18:31 評論0 收藏0
VUE

摘要：注意指令前面需要加，對指令傳遞數據賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現自定義指令注冊完成。 vue Vue.js 構建數據驅動的web界面庫。集中實現MVVM 的 VM層。容易與其他庫或項目整合通過盡可能簡單的API實現相應的數據綁定和組合的視圖組件核心：相應的數據綁定系統，數據與DOM保持同步數據驅動的視圖，普通的HTML模板中使用特殊的語...

bergwhite 2019-08-19 18:39 評論0 收藏0
面試被問到Vue?想進一步提升?那就停下來看一下吧

摘要：兩個對象鍵名沖突時，取組件對象的鍵值對。允許聲明擴展另一個組件可以是一個簡單的選項對象或構造函數，而無需使用。這主要是為了便于擴展單文件組件。 Vue作為最近最炙手可熱的前端框架，其簡單的入門方式和功能強大的API是其優點。而同時因為其API的多樣性和豐富性，所以他的很多開發方式就和一切基于組件的React不同，如果沒有對Vue的API（有一些甚至文檔都沒提到）有一個全面的了解，那么在...

andot 2019-08-26 14:05 評論0 收藏0
Vue.extend用法（主要用于需要動態渲染的組件，或者類似于window.alert() 提示

摘要：一簡單的使用主要用于需要動態渲染的組件，或者類似于提示組件注意創建的是一個組件構造器，而不是一個具體的組件實例屬于的全局，在實際業務開發中我們很少使用，因為相比常用的寫法使用步驟要更加繁瑣一些。最近在重構公司的項目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

masturbator 2019-08-23 18:35 評論0 收藏0