Home > Web Front-end > JS Tutorial > body text

Detailed explanation of Vue's mixins attribute

亚连
Release: 2018-05-30 13:54:58
Original
1809 people have browsed it

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') 
  } 
 }  
}
Copy after login

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() 
   }, 
  } 
 }
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template