What is the use of the mixins attribute in vue

This article introduces the relevant knowledge of "what is the use of mixins attributes in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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 the component, that is, the js code part of the component.

What the .js file does is trigger the handlePlaylist function during the life cycle and when the playList variable changes, but the logic of this function is implemented in the component to be changed. Let's take a look at how to use Mixin.

Import {playlistMixin} from 'common/js/mixin' / / introduces Mixin export default {mixins: [playlistMixin], methods: {handlePlaylist (playlist) {let bottom = playlist.length > 0?' 60px': 'this.$refs.recommend.style.bottom = bottom this.$refs.scroll.refresh ()},}}

This is called in the component being used.

Mixins: this property is an array, which means that multiple minxin files can be loaded.

The handlePlaylist method is to complete the business logic. So the this.handlePlaylist () method is added throughout the life cycle of the component.

This is the end of the content of "what is the use of mixins attributes in vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!