首先先給出官網 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() 方法。
這樣就可以減少一部分代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
