vue mixins組件復用的幾種方式(小結(jié))
最近在做項目的時候,研究了mixins,此功能有妙處。用的時候有這樣一個場景,頁面的風格不同,但是執(zhí)行的方法,和需要的數(shù)據(jù)非常的相似。我們是否要寫兩種組件呢?還是保留一個并且然后另個一并兼容另一個呢?
不管以上那種方式都不是很合理,因為組件寫成2個,不僅麻煩而且維護麻煩;第二種雖然做了兼容但是頁面邏輯造成混亂,必然不清晰;有沒有好的方法,有那就是用vue的混合插件mixins?;旌显赩ue是為了提出相似的數(shù)據(jù)和功能,使代碼易懂,簡單、清晰。
1.場景
假設我們有幾個不同的組件,它們的工作是切換狀態(tài)布爾、模態(tài)和工具提示。這些提示和情態(tài)動詞不有很多共同點,除了功能:他們看起來不一樣,他們不習慣相同,但邏輯是相同的。
//彈框 const Modal = { template: '#modal', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }, components: { appChild: Child } } //提示框 const Tooltip = { template: '#tooltip', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }, components: { appChild: Child } }
上面是一個彈框和提示框,如果考慮做2個組件,或者一個兼容另一個都不是合理方式。請看一下代碼
const toggle = { data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } } } const Modal = { template: '#modal', mixins: [toggle], components: { appChild: Child } }; const Tooltip = { template: '#tooltip', mixins: [toggle], components: { appChild: Child } };
用mixins引入toggle功能相似的js文件,進行混合使用
2.可以合并生命周期
//mixin const hi = { mounted() { console.log('this mixin!') } } //vue組件 new Vue({ el: '#app', mixins: [hi], mounted() { console.log('this Vue instance!') } }); //Output in console > this mixin! > this Vue instance!
先輸出的是mixins的數(shù)據(jù)
3、可以全局混合(類似已filter)
Vue.mixin({ mounted() { console.log('hello from mixin!') }, method:{ test:function(){ } } }) new Vue({ el: '#app', mounted() { console.log('this Vue instance!') } })
會在每一個組件中答應周期中的log,同時里面的方法,類似于vue的prototype添加實例方法一樣。
var install = function (Vue, options) { // 1. 添加全局方法或?qū)傩? Vue.myGlobalMethod = function () { // 邏輯... } // 2. 添加全局資源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 邏輯... } ... }) // 3. 注入組件 Vue.mixin({ created: function () { // 邏輯... } ... }) // 4. 添加實例方法 Vue.prototype.$myMethod = function (options) { // 邏輯... } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09Vue實現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11vue axios數(shù)據(jù)請求get、post方法及實例詳解
axios是一個基于Promise,同時支持瀏覽器端和Node.js的HTTP庫,常用于Ajax請求。這篇文章主要介紹了vue axios數(shù)據(jù)請求get、post方法的使用 ,需要的朋友可以參考下2018-09-09Vue+ElementUI項目使用webpack輸出MPA的方法
這篇文章主要介紹了Vue+ElementUI項目使用webpack輸出MPA的方法,本文圖文并茂給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08