vue2入坑隨記(二) -- 自定義動態組件

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

 Vue.extend

 思路就是拿到組件的構造函數，這樣咱們就能夠new了。而Vue.extend能夠作到：https://cn.vuejs.org/v2/api/#Vue-extend

// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 建立 Profile 實例，並掛載到一個元素上。
new Profile().$mount('#mount-point')

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

動態組件實現

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

<template>
 <transition name="el-message-fade">
<div  v-show="visible" class="my-msg">{{message}}</div>
  </transition>
</template>

<script  >
    export default{
        data(){
           return{
               message:'',
               visible:true
           } 
        },
        methods:{
            close(){
                setTimeout(()=>{
                     this.visible = false;
                },2000)
            },
        },
        mounted() {
        this.close();
      }
    }
</script>

這是咱們組件的構成。若是是第一節中，咱們能夠把他放到components對象中就能夠用了，可是這兒咱們要經過構造函數去建立它。再建立一個widgets/alert/src/main.js

import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue'));

let instance;

var MyMsg=function(msg){
 instance= new MyMsgConstructor({
     data:{
         message:msg
}})

//若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.$mount() 手動地掛載一個未掛載的實例。
instance.$mount();
 
 document.body.appendChild(instance.$el)
 return instance;
}


export default MyMsg;

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

import alert from './main.vue'
let MyMsgConstructor = Vue.extend(alert);

而MyMsgConstructor以下。

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

  Vue.prototype._init = function (options) {
    ...// merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    }
// expose real self
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');

    ...

    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };

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

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

 instance= new MessageConstructor({
     el:".leftlist",
     data:{
         message:msg
}})

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

調用

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

//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;

而後在頁面上測試一下：

<el-button type="primary" @click='test'>主要按鈕</el-button>
//..

　methods:{
  test(){
  this.$mymsg("hello vue");
  }
 }

 

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

 close(){
    setTimeout(()=>{
       this.visible = false;
       this.$el.parentNode.removeChild(this.$el);
      },2000)
   },

 回調處理

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

export default{
        data(){
           return{
               message:'',
               visible:true
           } 
        },
        methods:{
            close(){
                setTimeout(()=>{
                     this.visible = false;
                      this.$el.parentNode.removeChild(this.$el);

                if (typeof this.onClose === 'function') { this.onClose(this); }
                },2000)
            },
        },
        mounted() {
        this.close();
      }
    }

若是存在onClose方法就執行這個回調。而在初始狀態並無這個方法。而後在main.js中能夠傳入

var MyMsg=function(msg,callback){

 instance= new MyMsgConstructor({
     data:{
         message:msg
    },
    methods:{
        onClose:callback
    } 
})

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

   test(){
      this.$mymsg("hello vue",()=>{
        console.log("closed..")
      });
    },

你能夠直接重寫close方法，但這樣不推薦，由於可能搞亂以前的邏輯且可能存在重複的編碼。如今就靈活多了。

統一管理

 若是隨着自定義動態組件的增長，在main.js中逐個添加就顯得很繁瑣。因此這裏咱們可讓widgets提供一個統一的出口，往後也方便複用。在widgets下新建一個index.js 

import MyMsg from './alert/src/main.js';

const components = [MyMsg];

let install =function(Vue){
  components.map(component => {
    Vue.component(component.name, component);
  });

 Vue.prototype.$mymsg = MyMsg;

}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
};

export default {
    install
}

在這裏將全部自定義的組件經過Vue.component註冊。最後export一個install方法就能夠了。由於接下來要使用Vue.use。

安裝 Vue.js 插件。若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。install 方法將被做爲 Vue 的參數調用。

也就是把全部的組件當插件提供：在main.js中加入下面的代碼便可。

...
import VueResource from 'vue-resource'
import Widgets from './Widgets/index.js'

...
Vue.use(Widgets)

這樣就很簡潔了。

小結： 經過Vue.extend和Vue.use的使用，咱們自定義的組件更具備靈活性，並且結構很簡明，基於此咱們能夠構建本身的UI庫。以上來自於對Element源碼的學習。

widgets部分源碼：http://files.cnblogs.com/files/stoneniqiu/widgets.zip

vue2入坑隨記(一)-- 初始全家桶