複数のコンポーネントが同じ属性またはメソッドを持つ場合、同じ機能を抽出してファイルに書き込みますmixin.jsファイルmixin.jsの内容は複数のコンポーネントの同じ部分であり、その内容は複数のコンポーネントの構成項目の内容と同じですただし、mixin.jsファイル内の設定項目はすべて同じです。
コンポーネントがmixin.jsファイルの内容を使用する必要がある場合、まずこのコンポーネントにファイルをインポートしmixin.js、次にmixinそれを属性で配列として宣言します。重複する構成項目がある場合は、元の構成項目が保持され、その他のすべての構成項目が保持されます。元の構成アイテムと混合されて、新しい構成アイテムが形成されます。 注: ライフサイクル機能が重複する場合は、特定のコンポーネントではなく、それらの機能を実行する必要があります。！！
使い方：
- (1) ステップ 1: 混合する構成アイテムを定義します。
{
data(){
}
methosds:{
}
}
- ステップ 2: ブレンディングを使用します。これには、グローバル ブレンディングとローカル ブレンディングの 2 つの方法が含まれます。
モジュールから XXX をインポート
グローバル ミックスイン: Vue.mixin(xxx)
ローカル ミックスイン: minxins:['XXX']
案列：
(1). まず、混合する構成アイテム mixin.js を定義します。
export const hehe = {
methods: {
showName() {
console.log(this.name);
}
},
mounted() {
console.log('a')
}
}
(2) Student コンポーネントと School コンポーネントに mixin.js をインポートし、ローカルで使用します。
import {
hehe } from "../mixin";
export default {
name: "School",
data() {
return {
name: "学校名",
address: "学校地址",
};
},
mixins: [hehe],
};