この記事では主に 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ローダーをインストールする方法
以上がVueのmixins属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。