本篇文章給大家分享的是有關(guān)vue中mixins屬性的作用是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供吳堡企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為吳堡眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jì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') 
  } 
 }  
}

這個(gè)文件就暴露出一個(gè)對(duì)象，不過(guò)這個(gè)對(duì)象和組件很類似，也就是組件的js代碼部分類似。

這個(gè).js文件要做的事情就是，在生命周期中和playList 變量改變的時(shí)候觸發(fā)handlePlaylist 函數(shù)，但是這個(gè)函數(shù)的邏輯是在各自要改變的組件當(dāng)中去實(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: 這個(gè)屬性是個(gè)數(shù)組，也就是說(shuō)可以加載多個(gè) minxin 文件。

handlePlaylist 方法是完成業(yè)務(wù)邏輯。所以在組件的生命周期中都會(huì)添加 this.handlePlaylist() 方法。

以上就是vue中mixins屬性的作用是什么，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。