vue中mixins屬性有什么用

本篇內(nèi)容介紹了“vue中mixins屬性有什么用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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ù)的邏輯是在各自要改變的組件當(dāng)中去實現(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è)務(wù)邏輯。所以在組件的生命周期中都會添加 this.handlePlaylist() 方法。

“vue中mixins屬性有什么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！