Vueにおけるmixin混入機構

vueでは、コンポーネントコンテンツの多重化をより効率的に実現するためのハイブリッドメカニズムであるmixinsが提供されています.混入オブジェクトには、任意のコンポーネントオプションを含めることができます.コンポーネントが混入オブジェクトを使用する場合、混入オブジェクトのすべてのオプションがそのコンポーネント自体のオプションに混入されます.
簡単に言えば、コンポーネントは参照後、親コンポーネント内に個別の空間を開き、親コンポーネントpropsからの値に基づいて対応する操作を行うことに相当します.mixinsメカニズムを使用するコンポーネントは、コンポーネントを導入した後、dataなどのコンポーネント内部のコンテンツ、methodなどのプロパティを親コンポーネントの対応するコンテンツとマージしてレンダリングします.すなわち
単純コンポーネント参照

    +     >>>     +    

mixinsコンポーネント

     +     >>> new   

同時に、mixinsメカニズムのコンポーネントを使用すると、複数のコンポーネント間でデータとメソッドを共有することができ、mixinを使用するコンポーネントに導入されると、mixinのメソッドとプロパティもこのコンポーネントに組み込まれ、直接使用することができます.プロジェクトでvue-routerが使用されている場合、コンポーネントはmixinsメカニズムを自動的に使用します.
次にmixinの使用例を示します.1、jsファイル(mixin.js)を定義します.

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2、次にvueファイルでmixinを使用します.

import '@/mixin'; //   mixin  
export default {
 mixins: [mixin]
}

参考:Vueでmixinsを使用する