Detailed explanation of Vue's mixins attribute

This article mainly introduces the detailed explanation of the mixins attributes of Vue. Now I will share it with you and give you a reference.

First give the official website https://vuejs.org/v2/guide/mixins.html

Today when developing the project, we need to change the attributes of a label, because there are many All places have to be changed (the business logic is the same), so I decided to see if there was a way to change only one place and add the method. Finally, I found this attribute when I found the official website.

The following is my mixin.js file

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') 
  } 
 }  
}

This file exposes an object, but this object is very similar to a component. That is, the js code part of the component is similar.

What this .js file does is to trigger the handlePlaylist function during the life cycle and when the playList variable changes, but the logic of this function is implemented in the respective components to be changed. Let’s see how to use 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() 
   }, 
  } 
 }

Call this in the component used.

mixins: This property is an array, which means multiple mixin files can be loaded.

handlePlaylist method is to complete the business logic. Therefore, the this.handlePlaylist() method will be added in the component's life cycle.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Broadcasting and receiving of Vue2.0 events (observer mode)

vue2.0 installation Style/css loader method

iview table height dynamic setting method

The above is the detailed content of Detailed explanation of Vue's mixins attribute. For more information, please follow other related articles on the PHP Chinese website!