vue2筆記——自定義動態組件

學習了Vue全家桶和一些UI基本夠用了，但是用元素的方式使用組件還是不夠靈活，比如我們需要通過js代碼直接調用組件，而不是每次在頁面上通過屬性去控制組件的表現。下面講一下如何定義動態組件。

Vue.extend

思路就是拿到組件的構造函數，這樣我們就可以new了。

官方提供了這個示例，我們進行一下改造，做一個簡單的消息提示框。

動態組件實現

創建一個vue文件。widgets/alert/src/main.vue

這是我們組件的構成。如果是第一節中，我們可以把他放到components對象中就可以用了，但是這兒我們要通過構造函數去創建它。再創建一個widgets/alert/src/main.js

require('./main.vue')返回的是一個組件初始對象，對應Vue.extend( options )中的options，這個地方等價於下面的代碼：

而MyMsgConstructor如下。

參考源碼中的this._init,會對參數進行合併，再按照生命週期運行：

而調用$mount()是為了獲得一個掛載實例。這個示例就是instance.$el。

可以在構造方法中傳入el對象(注意上面源碼中的mark部分，也是進行了掛載vm.$mount(vm.$options.el)，但是如果你沒有傳入el，new之後不會有$el對象的，就需要手動調用$mount()。這個方法可以直接傳入元素id。

這個el不能直接寫在vue文件中，會報錯。接下來我們可以簡單粗暴的將其設置為Vue對象。

調用

在main.js引入我們的組件：

這樣就實現了基本的傳參。最好是在close方法中移除元素：

回調處理

回調和傳參大同小異，可以直接在構造函數中傳入。先修改下main.vue中的close方法：

如果存在onClose方法就執行這個回調。而在初始狀態並沒有這個方法。然後在main.js中可以傳入

這裡的參數和原始參數是合併的關係，而不是覆蓋。這個時候再調用的地方修改下，就可以執行回調了。

統一管理

如果隨著自定義動態組件的增加，在main.js中逐個添加就顯得很繁瑣。所以這裡我們可以讓widgets提供一個統一的出口，日後也方便複用。在widgets下新建一個index.js

在這裡將所有自定義的組件通過Vue.component註冊。最後export一個install方法就可以了。因為接下來要使用Vue.use。

小結： 通過Vue.extend和Vue.use的使用，我們自定義的組件更具有靈活性，而且結構很簡明，基於此我們可以構建自己的UI庫。

跳槽求職找工作？

優就業500萬陽光就業基金：

http://www.ujiuye.com/zt/jyfc/?wt.bd=fq37300j

優就業官網：http://www.ujiuye.com/?wt.bd=fq37300j