摘要:一簡單的使用主要用于需要動態渲染的組件,或者類似于提示組件注意創建的是一個組件構造器,而不是一個具體的組件實例屬于的全局,在實際業務開發中我們很少使用,因為相比常用的寫法使用步驟要更加繁瑣一些。
最近在重構公司的項目,有些組件想要封裝的更靈活,例如toast、loading、messageBox等彈窗組件,模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件;
mint-UI的toast、loading、messageBox等彈窗組件基于Vue.extend()方法,也就是預設了部分選項的Vue實例構造器,返回一個組件構造器;用來生成組件,可以在實例上擴展方法,從而使用更靈活;可以理解為當在模版中遇到該組件名稱作為標簽的自定義元素時,會自動調用這個實例構造器來生成組件實例,并掛載到指定元素上。
一、Vue.extend(options)簡單的使用:(主要用于需要 動態渲染的組件,或者類似于window.alert() 提示組件)注意:extend創建的是一個組件構造器,而不是一個具體的組件實例;
屬于 Vue 的全局 API,在實際業務開發中我們很少使用,因為相比常用的 Vue.component 寫法使用 extend 步驟要更加繁瑣一些。但是在一些獨立組件開發場景中,Vue.extend + $mount 這對組合是我們需要去關注的。
基礎用法:
// 創建構造器 var Profile = Vue.extend({ template: "{{firstName}} {{lastName}} aka {{alias}}
", data: function () { return { firstName: "Walter", lastName: "White", alias: "Heisenberg" } } }) // 創建 Profile 實例,并掛載到一個元素上。 new Profile().$mount("#mount-point")
可以看到,extend 創建的是 Vue 構造器,而不是我們平時常寫的組件實例,所以不可以通過 new Vue({ components: testExtend }) 來直接使用,需要通過 new Profile().$mount("#mount-point") 來掛載到指定的元素上。
第二種寫法,可以在創建實例的時候傳入一個元素,生成的組件將會掛載到這個元素上,跟$mount差不多,如下:
1、定義一個vue模版:
let tem ={ template:"{{firstName}} {{lastName}} aka {{alias}}", data:function(){ return{ firstName:"Walter", lastName:"White", alias:"Heisenberg" } }
2 、調用;
const TemConstructor = Vue.extend(tem) const intance = new TemConstructor({el:"#app"}) //生成一個實例,并且掛載在#app上二、封裝toast組件
首先按照普通寫法定義一個vue組件模版,toast.vue,寫法與普通組件寫法相同;
然后重點來了,看一下怎么具體掛載到vue組件上的
const ToastConstructor = Vue.extend(toast) // toast就是vue模版 let toastTool = [] const getIntance = () => {// 通過構造器獲取實例 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 () { // 實例的一些方法 this.visible = false this.closed = true this.$el.addEventListener("transitionend", removeDom) // 執行完畢之后刪除dom toastTool.push(this) console.log(toastTool) } const Toast = (options = {}) => { // options是對應的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方法導出,調用
將Toast方法導出,將這個方法掛載到vue全局變量
Vue.$toast = Vue.prototype.$toast = Toast
Vue.$loading = Vue.prototype.$loading = Loading
在項目中使用時就可以直接用this.$toast()調用,或者Vue.$toast()調用,返回的是一個instance,創建了一個組件。
主要對Vue.extend的用法,主要用于動態渲染組件和一個類似于似于 window.alert() 提示組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105475.html
摘要:最近數月一直投身于的開源工作中,完成了大大小小多個組件,在組件化開發中積累了不少經驗。在開發全局提示組件通知提醒組件對話框組件時,內部都是使用來渲染,但卻是來隱式地創建這些實例,這樣我們就可以像標題這樣使用,但其內部還是通過來管理。 最近數月一直投身于 iView 的開源工作中,完成了大大小小 30 多個 UI 組件,在 Vue 組件化開發中積累了不少經驗。其中也有很多帶有技巧性和黑科...
摘要:最近數月一直投身于的開源工作中,完成了大大小小多個組件,在組件化開發中積累了不少經驗。在開發全局提示組件通知提醒組件對話框組件時,內部都是使用來渲染,但卻是來隱式地創建這些實例,這樣我們就可以像標題這樣使用,但其內部還是通過來管理。 最近數月一直投身于 iView 的開源工作中,完成了大大小小 30 多個 UI 組件,在 Vue 組件化開發中積累了不少經驗。其中也有很多帶有技巧性和黑科...
摘要:兩個對象鍵名沖突時,取組件對象的鍵值對。允許聲明擴展另一個組件可以是一個簡單的選項對象或構造函數,而無需使用。這主要是為了便于擴展單文件組件。 Vue作為最近最炙手可熱的前端框架,其簡單的入門方式和功能強大的API是其優點。而同時因為其API的多樣性和豐富性,所以他的很多開發方式就和一切基于組件的React不同,如果沒有對Vue的API(有一些甚至文檔都沒提到)有一個全面的了解,那么在...
摘要:添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖,會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素,可以使用包裹。 1.前言 安裝 直接用 引入(本地或者cdn) npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...
閱讀 2946·2021-10-28 09:32
閱讀 2974·2021-10-11 10:57
閱讀 3123·2021-10-08 10:05
閱讀 2601·2021-09-28 09:36
閱讀 2218·2019-08-30 15:55
閱讀 2274·2019-08-30 15:44
閱讀 2398·2019-08-30 14:02
閱讀 3077·2019-08-29 17:16