Vue.jsのmixinで簡単共通化メモ

mixinで共通化をする

mixin機能を利用することで、複数のコンポーネントで処理を共通化することができます。

使い方

例えば、以下のようなコンポーネントがあり、createdの処理と、methodsを共通化する為mixinにしたいと思います。

<template>
  <div :style="style">{{ name }}
  </div>
</template>
<style>
</style>
<script>

export default {
    created:function(){
      this.setStyle()
      this.setName()
    },
    methods:{
      setStyle(){
        this.style = 'font-size:30px'
      },
      setName(){
        this.name = 'Mixin'
      }
    }
};
</script>

mixin用のオブジェクトを作成

以下のような感じでmixin用のオブジェクトを作成します。

mixin.js

  export const Mixin =  {
    created:function(){
      this.setStyle()
      this.setName()
    },
    methods:{
      setStyle(){
        this.style = 'font-size:30px'
      },
      setName(){
        this.name = 'Mixin'
      }
    }
  }

mixinsに共通処理用のオブジェクトをセットする。

<template>
  <div :style="style">{{ name }}
  </div>
</template>
<style>
</style>
<script>
import {Mixin} from '../mixin'

export default {
  mixins:[Mixin]
};
</script>

mixinのマージのルール

同じメソッドが定義していある場合

mixinとcomponentで同じメソッドが定義している場合は、componentが優先されます。

  export const Mixin =  {
    created:function(){
      this.mtd()  
    },
    methods:{
      mtd(){
        console.log('mixin mtd')
      }
    }
  }

<template>
  <div></div>
</template>
<style>
</style>
<script>
import {Mixin} from '../mixin'

export default {
  mixins:[Mixin],
  methods:{
    mtd(){
      console.log('component mtd') 
    }
  }
};
</script>

以下が出力される。

component mtd

createdに同じ関数が定義されている場合

mixinとcomponentでcreatedに同じ関数が定義されている場合はmixin →　componentの順で実行されます。

export const Mixin = {
  created: function () {
    this.mtd('mixin')
  },
  methods: {
    mtd(v) {
      console.log(v)
    }
  }
}

<template>
  <div></div>
</template>
<style>
</style>
<script>
import { Mixin } from "../mixin";

export default {
  mixins: [Mixin],
  created: function() {
    this.mtd('component');
  }
};
</script>

以下が出力される。

mixin
component

mixinの命名規則

mixinの機能を詰め込みすぎると、不要な機能もコンポーネントに入れていしまう可能性がある為、なるべく小さく作るのが良さそうです。その際に、機能がミックスインの名前からわかるような命名規則にします。

ミックスインの名前の付け方として、「動詞 +able」のような付け方が好ましいようです。

のぐそんブログ

暗いおじさんがシコシコ書くブログです。