vue的mixins屬性詳解
首先先給出官網(wǎng) https://vuejs.org/v2/guide/mixins.html
今天在開發(fā)項(xiàng)目的時(shí)候要改變一個(gè)標(biāo)簽的屬性，因?yàn)轫?xiàng)目中有多個(gè)地方都要改(業(yè)務(wù)邏輯相同)，所以就看有沒辦法只改變一個(gè)地方，把方法加進(jìn)去,最后找官網(wǎng)就發(fā)現(xiàn)這個(gè)屬性。
下面是我的-mixin.js 文件
import {mapGetters, mapMutations, mapActions} from 'vuex'
export const playlistMixin = {
computed: {
...mapGetters([
'playList'
])
},
mounted() {
this.handlePlaylist(this.playList)
},
activated() {
this.handlePlaylist(this.playList)
},
watch: {
playList(newVal) {
this.handlePlaylist(newVal)
}
},
methods: {
handlePlaylist() {
throw new Error('component must implement handlePlaylist method')
}
}
}
這個(gè)文件就暴露出一個(gè)對象，不過這個(gè)對象和組件很類似，也就是組件的js代碼部分類似。
這個(gè).js文件要做的事情就是，在生命周期中和playList 變量改變的時(shí)候觸發(fā)handlePlaylist 函數(shù)，但是這個(gè)函數(shù)的邏輯是在各自要改變的組件當(dāng)中去實(shí)現(xiàn)。下面看看怎么用Mixin。
import {playlistMixin} from 'common/js/mixin' //引入Mixin
export default {
mixins: [playlistMixin],
methods: {
handlePlaylist (playlist) {
let bottom = playlist.length > 0 ? '60px' : ''
this.$refs.recommend.style.bottom = bottom
this.$refs.scroll.refresh()
},
}
}
在使用的組件中這樣調(diào)用。
mixins: 這個(gè)屬性是個(gè)數(shù)組，也就是說可以加載多個(gè) minxin 文件。
handlePlaylist 方法是完成業(yè)務(wù)邏輯。所以在組件的生命周期中都會添加 this.handlePlaylist() 方法。
這樣就可以減少一部分代碼。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue是人氣爆棚且地表最強(qiáng)的JS（JavaScript）框架,祂允許我們構(gòu)建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識別和修復(fù)這些問題的錦囊妙計(jì)2023-11-11
Vue+Vuex實(shí)現(xiàn)自動登錄的知識點(diǎn)詳解
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動登錄的知識點(diǎn)詳解，需要的朋友們可以學(xué)習(xí)下。2020-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)
這篇文章主要介紹了使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
使用vue.js實(shí)現(xiàn)聯(lián)動效果的示例代碼
本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
詳解vee-validate的使用個(gè)人小結(jié)
本篇文章主要介紹了詳解vee-validate的使用個(gè)人小結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-06-06
使用vue-cli創(chuàng)建項(xiàng)目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項(xiàng)目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下2018-05-05
vite構(gòu)建vue3項(xiàng)目的全過程記錄
vite是VUE3創(chuàng)建項(xiàng)目的工具,項(xiàng)目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-01-01
我們的vue2.0項(xiàng)目當(dāng)中,存儲了許多圖片和視頻資源,所以我們需要增加防盜鏈設(shè)置,但是這樣一來,當(dāng)我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當(dāng)中的時(shí)候,會報(bào)錯,所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下2023-12-12
本文是作者通過實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08