vue的mixins屬性詳解

這篇文章主要介紹了vue的mixins屬性詳解，現在分享給大家，也給大家做個參考。

首先先給官網https://vuejs.org/v2/guide/mixins.html

今天在開發專案的時候要改變一個標籤的屬性，因為專案中有多個地方都要改(業務邏輯相同)，所以就看有沒辦法只改變一個地方，把方法加進去,最後找官網就發現這個屬性。

下面是我的-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 變數改變的時候觸發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() 
   }, 
  } 
 }

在使用的元件中這樣呼叫。

mixins: 這個屬性是個數組，也就是說可以載入多個 minxin 檔案。

handlePlaylist 方法是完成業務邏輯。所以在元件的生命週期中都會加入 this.handlePlaylist() 方法。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Vue2.0 事件的廣播與接收(觀察者模式)

vue2.0安裝style/css loader的方法

iview table高度動態設定方法

以上是vue的mixins屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！