Vue.extend用法（主要用于需要動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示

masturbator 發(fā)布于2019-08-23 18:35 / 4032人閱讀

摘要：一簡單的使用主要用于需要?jiǎng)討B(tài)渲染的組件，或者類似于提示組件注意創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例屬于的全局，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫膶懛ㄊ褂貌襟E要更加繁瑣一些。

最近在重構(gòu)公司的項(xiàng)目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件；

mint-UI的toast、loading、messageBox等彈窗組件基于Vue.extend()方法，也就是預(yù)設(shè)了部分選項(xiàng)的Vue實(shí)例構(gòu)造器，返回一個(gè)組件構(gòu)造器；用來生成組件，可以在實(shí)例上擴(kuò)展方法，從而使用更靈活；可以理解為當(dāng)在模版中遇到該組件名稱作為標(biāo)簽的自定義元素時(shí)，會(huì)自動(dòng)調(diào)用這個(gè)實(shí)例構(gòu)造器來生成組件實(shí)例，并掛載到指定元素上。

一、Vue.extend(options)簡單的使用：（主要用于需要動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示組件）

注意：extend創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例；
屬于 Vue 的全局 API，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?Vue.component 寫法使用 extend 步驟要更加繁瑣一些。但是在一些獨(dú)立組件開發(fā)場景中，Vue.extend + $mount 這對組合是我們需要去關(guān)注的。
基礎(chǔ)用法：


// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
  template: "{{firstName}} {{lastName}} aka {{alias}}",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg"
    }
  }
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。
new Profile().$mount("#mount-point")

可以看到，extend 創(chuàng)建的是 Vue 構(gòu)造器，而不是我們平時(shí)常寫的組件實(shí)例，所以不可以通過 new Vue({ components: testExtend }) 來直接使用，需要通過 new Profile().$mount("#mount-point") 來掛載到指定的元素上。

第二種寫法，可以在創(chuàng)建實(shí)例的時(shí)候傳入一個(gè)元素，生成的組件將會(huì)掛載到這個(gè)元素上，跟$mount差不多，如下：
1、定義一個(gè)vue模版：

let  tem ={
    template:"{{firstName}} {{lastName}} aka {{alias}}",
    data:function(){    
    return{    
    firstName:"Walter",   
    lastName:"White",    
    alias:"Heisenberg"
    }
}

2 、調(diào)用；

const TemConstructor = Vue.extend(tem) 
const intance = new TemConstructor({el:"#app"}) //生成一個(gè)實(shí)例，并且掛載在#app上

二、封裝toast組件

首先按照普通寫法定義一個(gè)vue組件模版，toast.vue,寫法與普通組件寫法相同；

然后重點(diǎn)來了，看一下怎么具體掛載到vue組件上的

const ToastConstructor = Vue.extend(toast)  // toast就是vue模版
let toastTool = []
const getIntance = () => {// 通過構(gòu)造器獲取實(shí)例
  if (toastTool.length > 0) {
    const intance = toastTool[0]
    return intance
  }
  return new ToastConstructor({
    el: document.createElement("div")
  })
}

const removeDom = (e) => {
  if (e.target.parentNode) {
    e.target.parentNode.removeChild(e.target)
  }
}

ToastConstructor.prototype.close = function () { // 實(shí)例的一些方法
  this.visible = false
  this.closed = true
  this.$el.addEventListener("transitionend", removeDom) // 執(zhí)行完畢之后刪除dom
  toastTool.push(this)
  console.log(toastTool)
}

const Toast = (options = {}) => {    // options是對應(yīng)的props需要接收的傳入的值
  const intance = getIntance()
  document.body.appendChild(intance.$el) // 將元素append到頁面上
  intance.message = typeof options !== "object" ? options : options.message || "操作成功"
  intance.duration = options.duration || 3000
  intance.className = options.className || ""
  intance.iconName = options.iconName || ""
  intance.position = options.position || ""
  intance.closed = false
  intance.$el.removeEventListener("transitionend", removeDom)
  clearTimeout(intance.timer)
  Vue.nextTick(function () {
    intance.visible = true
    intance.duration && (intance.timer = setTimeout(function () {
      if (intance.closed) {
        return false
      }
      intance.close()
    }, intance.duration))
  })

  return intance

}
export default Toast //將Toast方法導(dǎo)出，調(diào)用

將Toast方法導(dǎo)出，將這個(gè)方法掛載到vue全局變量
Vue.$toast = Vue.prototype.$toast = Toast
Vue.$loading = Vue.prototype.$loading = Loading
在項(xiàng)目中使用時(shí)就可以直接用this.$toast()調(diào)用，或者Vue.$toast()調(diào)用，返回的是一個(gè)instance,創(chuàng)建了一個(gè)組件。

主要對Vue.extend的用法，主要用于動(dòng)態(tài)渲染組件和一個(gè)類似于似于 window.alert() 提示組件