Vue Mixin

Minxinとは?

混入は、名前が示すように、素子に何かを混合することによって必要な機能を実現する.実施・運転混入の手順に従って作成し、以下のように整理することができる.
ブレンドするオブジェクト

および

を作成します.
オブジェクトを

コンポーネント、

にブレンド

実施残り部分完了

ここで一番大切なのは「2.[コンポーネントにオブジェクトをブレンド](Blend Objects To Component)では、次の原則が適用されます(図では視覚化されます).

特長

HTML/CSSは混入しません.つまり,混入ファイルは純JavaScriptを用いて作成されたオブジェクトである.

   // 가능하긴 하지만 권장되지 않음!
let mixin = {
   ...
   Template: `<div> ...</div>`
   data {
    return {
      styleObj: { 'width' : 100 }
    }
  }
}

ミックスで宣言されたプロパティ(e.g.data、lifecyclehook、methods...)構成部品で再宣言できます.この場合、宣言された値が構成部品に優先的に結合されます.

// 즉, 아래와 같이 mixin.js와 component.vue에 같은 속성이 중복 선언된 경우에
// mixin.js
...
data {
  return {
    age: 20
  }
}
...

// component.vue
  ...
data {
  return {
    age: 26
  }
}
...

// 컴포넌트의 선언값이 살아남습니다.
// result
  <div>{{ age }}</div>
// => <div>26</div>

例

@/mixins/MyMixin.js

@/components/MixinComponent.vue

リファレンス

Vue.js Mixin：パッケージ機能