首先先給出官網(wǎng) https://vuejs.org/v2/guide/mixins.html
今天在開發(fā)項(xiàng)目的時(shí)候要改變一個(gè)標(biāo)簽的屬性，因?yàn)轫?xiàng)目中有多個(gè)地方都要改(業(yè)務(wù)邏輯相同)，所以就看有沒辦法只改變一個(gè)地方，把方法加進(jìn)去,最后找官網(wǎng)就發(fā)現(xiàn)這個(gè)屬性。
下面是我的-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ì)象，不過這個(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ù)組，也就是說可以加載多個(gè) minxin 文件。
handlePlaylist 方法是完成業(yè)務(wù)邏輯。所以在組件的生命周期中都會(huì)添加 this.handlePlaylist() 方法。
這樣就可以減少一部分代碼。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
