Vueのmixins属性の詳しい説明

この記事では主に Vue の mixins 属性について詳しく説明しますので、参考にしてください。

まず、公式ウェブサイト 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' //引入Mixin 
 export default { 
  mixins: [playlistMixin], 
  methods: { 
    handlePlaylist (playlist) { 
    let bottom = playlist.length > 0 ? '60px' : '' 
    this.$refs.recommend.style.bottom = bottom 
    this.$refs.scroll.refresh() 
   }, 
  } 
 }

使用するコンポーネント内で次のように呼び出します。

mixins: この属性は配列であり、複数の minxin ファイルをロードできることを意味します。

handlePlaylist メソッドはビジネス ロジックを完成させます。したがって、 this.handlePlaylist() メソッドがコンポーネントのライフサイクルに追加されます。

上記は私があなたのためにまとめたものです。

関連記事:

Vue2.0イベントのブロードキャストと受信(オブザーバーモード)

vue2.0にstyle/cssローダーをインストールする方法

iviewテーブルの高さの動的設定方法

以上がVueのmixins属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。