Vue.extend 編程式插入組件

前言

平常中咱們要使用一個彈框組件的方式一般是先經過Vue.component 全局或是 component 局部註冊後，而後在模版中使用。接下來咱們嘗試編程式的使用組件。

實現

其實步驟很簡單

1. 經過 Vue.extend() 建立構造器
2. 經過 Vue.$mount() 掛載到目標元素上
3. 目標實現一個 alert 彈框，確認和取消功能以下圖

   

document.createElement

其實想要插入一個元素，經過 document.createElement 就能夠實現，並不是必定須要上面兩步，可是涉及到組件的複雜度、樣式設置、可維護性因此使用建立構造器的方式比較可行。

Vue.extend()

首先來定義這個彈框的結構和樣式，就是正常的寫組件便可

<template>
  <div class="grid">
      <h1 class="head">這裏是標題</h1>
      <div @click="close">{{ cancelText }}</div>
      <div @click="onSureClick">{{ sureText }}</div>
  </div>
</template>
<script>
export default {
  props:{
    close:{
      type:Function,
      default:()=>{}
    },
    cancelText:{
      type:String,
      default:'取消'
    },
    sureText:{
      type:String,
      default:'肯定'
    }
  },
  methods:{
    onSureClick(){
      // 其餘邏輯
      this.close()
    }
  }
};
</script>

複製代碼

將建立構造器和掛載到目標元素上的邏輯抽離出來，多處能夠複用

export function extendComponents(component,callback){
  const Action = Vue.extend(component)
  const div = document.createElement('div')
  document.body.appendChild(div)
  const ele = new Action({
    propsData:{
      cancelText:'cancel',
      sureText:'sure',
      close:()=>{
        ele.$el.remove()
        callback&&callback()
      }
    }
  }).$mount(div)
}
複製代碼

上面代碼須要注意如下幾點：

1. Vue.extend 得到是一個構造函數，能夠經過實例化生成一個 Vue 實例
2. 實例化時能夠向這個實例傳入參數，可是須要注意的是 props 的值須要經過 propsData 屬性來傳遞
3. 獲得 Vue 實例後，咱們須要經過一個目標元素來掛載它，有人首先會想到掛載到 #app 上，這個掛載的過程是將目標元素的內容所有替換，因此一旦掛載到 #app 上，該元素的全部子元素都會消失被替換
4. 針對第3點，因此建立了一個 div 元素插入到 body 中，咱們將想要掛載的內容替換到這個div上

Vue.extend 和 Vue.component component 的區別

1. Vue.component component二者都是須要先進行組件註冊後，而後在 template 中使用註冊的標籤名來實現組件的使用。Vue.extend 則是編程式的寫法
2. 關於組件的顯示與否，須要在父組件中傳入一個狀態來控制 或者 在組件外部用 v-if/v-show 來實現控制，而 Vue.extend 的顯示與否是手動的去作組件的掛載和銷燬。
3. Vue.component component 在組件中須要使用 slot 等自定義UI時更加靈活，而 Vue.extend 因爲沒有 template的使用，沒有slot 都是經過 props 來控制UI，更加侷限一些。