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