首先先給出官網?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' //引入Mixinexport default {mixins: [playlistMixin],methods: {handlePlaylist (playlist) {let bottom = playlist.length > 0 ? '60px' : ''this.$refs.recommend.style.bottom = bottomthis.$refs.scroll.refresh()},}}
在使用的組件中這樣調用。

mixins: 這個屬性是個數組，也就是說可以加載多個 minxin 文件。

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

這樣就可以減少一部分代碼。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue的mixins属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。