深刻了解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，快速升職加薪，走上人生巔峯。