深入瞭解vue的mixins屬性

這篇文章主要介紹了vue的mixins屬性詳解，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

今天在開發項目的時候要改變一個標籤的屬性，因爲項目中有多個地方都要改(業務邏輯相同)，所以就看有沒辦法只改變一個地方，把方法加進去,最後找官網就發現這個屬性。
下面是我的-mixin.js 文件

import {mapGetters, mapMutations, mapActions} from 'vuex' 
export const playlistMixin = { 
 computed: { 
  ...mapGetters([ 
   'playList'
  ]) 
 }, 
 mounted() { 
  this.handlePlaylist(this.playList) 
 }, //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
 activated() { 
  this.handlePlaylist(this.playList) 
 }, 
 watch: { 
  playList(newVal) { 
   this.handlePlaylist(newVal) 
  } 
 }, 
 methods: { 
  handlePlaylist() { 
   throw new Error('component must implement handlePlaylist method') 
  } //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
 }  
}

這個文件就暴露出一個對象，不過這個對象和組件很類似，也就是組件的js代碼部分類似。
這個.js文件要做的事情就是，在生命週期中和playList 變量改變的時候觸發handlePlaylist 函數，但是這個函數的邏輯是在各自要改變的組件當中去實現。下面看看怎麼用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() 
   }, //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
  } 
 } 

在使用的組件中這樣調用。
mixins: 這個屬性是個數組，也就是說可以加載多個 minxin 文件。
handlePlaylist 方法是完成業務邏輯。所以在組件的生命週期中都會添加 this.handlePlaylist() 方法。
這樣就可以減少一部分代碼。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。