vue mixins組件復(fù)用的幾種方式(小結(jié))
最近在做項(xiàng)目的時(shí)候,研究了mixins,此功能有妙處。用的時(shí)候有這樣一個(gè)場(chǎng)景,頁面的風(fēng)格不同,但是執(zhí)行的方法,和需要的數(shù)據(jù)非常的相似。我們是否要寫兩種組件呢?還是保留一個(gè)并且然后另個(gè)一并兼容另一個(gè)呢?
不管以上那種方式都不是很合理,因?yàn)榻M件寫成2個(gè),不僅麻煩而且維護(hù)麻煩;第二種雖然做了兼容但是頁面邏輯造成混亂,必然不清晰;有沒有好的方法,有那就是用vue的混合插件mixins?;旌显赩ue是為了提出相似的數(shù)據(jù)和功能,使代碼易懂,簡單、清晰。
1.場(chǎng)景
假設(shè)我們有幾個(gè)不同的組件,它們的工作是切換狀態(tài)布爾、模態(tài)和工具提示。這些提示和情態(tài)動(dòng)詞不有很多共同點(diǎn),除了功能:他們看起來不一樣,他們不習(xí)慣相同,但邏輯是相同的。
//彈框 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 } }
上面是一個(gè)彈框和提示框,如果考慮做2個(gè)組件,或者一個(gè)兼容另一個(gè)都不是合理方式。請(qǐng)看一下代碼
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文件,進(jìn)行混合使用
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!') } })
會(huì)在每一個(gè)組件中答應(yīng)周期中的log,同時(shí)里面的方法,類似于vue的prototype添加實(shí)例方法一樣。
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. 添加實(shí)例方法 Vue.prototype.$myMethod = function (options) { // 邏輯... } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue實(shí)現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11vue axios數(shù)據(jù)請(qǐng)求get、post方法及實(shí)例詳解
axios是一個(gè)基于Promise,同時(shí)支持瀏覽器端和Node.js的HTTP庫,常用于Ajax請(qǐng)求。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求get、post方法的使用 ,需要的朋友可以參考下2018-09-09Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法
這篇文章主要介紹了Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08