1.ミックスインとは何ですか？

混入 (mixin) それは非常に柔軟な方法を提供し、再利用可能な機能のアセンブリのVueを配布します。ミックスインオブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントが混合オブジェクトを使用する場合、混合オブジェクトのすべてのオプションがコンポーネント自体のオプションに「混合」されます。

2.プロジェクトでミックスインを使用するにはどうすればよいですか？

vueコンポーネントでは、コンポーネント、メソッド、フック関数などの一般的な関数を再利用する場合は、ミキシングを選択することをお勧めします。ここでは、混合の方法と特性について簡単に紹介します。
次の図に示すように、ディレクトリmixinsを作成してcommon.jsファイルを作成できます。
ここに画像の説明を挿入します

ミックスインオブジェクトを定義する

common.jsは、他のコンポーネントに混ぜたいものです。

export default {
    
    
  data() {
    
    
    return {
    
    }
  },
  created() {
    
     //钩子函数
    console.log('这是混入的组件')
    this.hello();
  },
  methods: {
    
    
    hello() {
    
    
      console.log('hello! 混入test');
    },
  }
}

コンポーネントでミックスインを使用する

common.jsファイルをtest2.vueファイルにインポートし、mixinsを使用してcommon.jsコンテンツを現在のコンポーネントにミックスします

<template>
  <div>
  </div>
</template>

<script>
import mixinTest from "../../mixins/common.js";
export default {
    
    
  mixins: [mixinTest],
  data() {
    
    
    return {
    
    
      level: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

効果

ここに画像の説明を挿入します

3.オプションの組み合わせの詳細な調査

ミックスインの使用は、ミックスインオブジェクトとミックスインオブジェクトを使用するコンポーネントがオプションで同じ名前を持っているという問題に遭遇する運命にあります。

コンポーネントと混合オブジェクトに同じ名前のオプションが含まれている場合、Vueは次のように「マージ」することで問題を適切に解決します。

データオブジェクトは内部で再帰的にマージされ、競合が発生した場合はコンポーネントデータが優先されます。
同じ名前のフック関数が配列にマージされるため、すべてが呼び出されます。さらに、混合オブジェクトのフックは、コンポーネント自体のフックの前に呼び出されます。つまり、オブジェクトフックにミックスするタイミング>コンポーネント自体のフック
その値があるオブジェクトのオプションは、等methods、components及びdirectives、同じオブジェクトに結合されるであろう。2つのオブジェクトのキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアを取得します。

4.注意が必要な事項

ミキシングはグローバルに登録することもできます。ご使用の際は特にご注意ください！グローバルミックスインが使用されると、後で作成されるすべてのVueインスタンスに影響します。

グローバルミックスインは、個別に作成されたすべてのVueインスタンス（サードパーティコンポーネントを含む）に影響するため、注意して使用してください。

参照

https://blog.csdn.net/weixin_46071217/article/details/108742358

プロジェクトでのvueミックスインの使用について説明する