最近在做項(xiàng)目的時(shí)候,研究了mixins,此功能有妙處。用的時(shí)候有這樣一個(gè)場(chǎng)景,頁(yè)面的風(fēng)格不同,但是執(zhí)行的方法,和需要的數(shù)據(jù)非常的相似。我們是否要寫(xiě)兩種組件呢?還是保留一個(gè)并且然后另個(gè)一并兼容另一個(gè)呢?
成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供灞橋網(wǎng)站建設(shè)、灞橋做網(wǎng)站、灞橋網(wǎng)站設(shè)計(jì)、灞橋網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、灞橋企業(yè)網(wǎng)站模板建站服務(wù),10余年灞橋做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
不管以上那種方式都不是很合理,因?yàn)榻M件寫(xiě)成2個(gè),不僅麻煩而且維護(hù)麻煩;第二種雖然做了兼容但是頁(yè)面邏輯造成混亂,必然不清晰;有沒(méi)有好的方法,有那就是用vue的混合插件mixins。混合在Vue是為了提出相似的數(shù)據(jù)和功能,使代碼易懂,簡(jiǎn)單、清晰。
1.場(chǎng)景
假設(shè)我們有幾個(gè)不同的組件,它們的工作是切換狀態(tài)布爾、模態(tài)和工具提示。這些提示和情態(tài)動(dòng)詞不有很多共同點(diǎn),除了功能:他們看起來(lái)不一樣,他們不習(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、可以全局混合(類(lèi)似已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í)里面的方法,類(lèi)似于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) { // 邏輯... } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題:vuemixins組件復(fù)用的幾種方式(小結(jié))
本文URL:http://muchs.cn/article22/pgojjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、虛擬主機(jī)、定制開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、做網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)