ミックスイン

Vue.js

同じコードを使い回す。プラグインを作りたい時とか。

※コンポーネントとミックスインのコードが被ったら、コンポーネントが優先される
※ライフサイクルフックの内容に関してはミックスイン→コンポーネントの順で実行される

// event.js
export const event = {
    data(){
        return {
            locations: ["東京","大阪","名古屋"]
            eventData: {
                detail: "foo",
                isPrivate: false,
                target: [],
                price: "無料",
                location: "東京"
            }

コンポーネント側

import event from '@/event.js'　// @は/srcからの相対パス
 
export default {
    mixins: [event]
}