Vue での mixin の応用について議論する

ミックスイン = {
  データ （） {
    戻る {
      ユーザー名: 'mixin'
    }
  },
  作成された（）{
    this.sayHello()
  },
  メソッド: {
    こんにちは（）{
      console.log(`${this.userName}, welcome`)
    }
  }
}

デフォルトのミックスインをエクスポートする

<スクリプト>
    '../mixin' から mixin をインポートします

    エクスポートデフォルト{
      ミックスイン: [ミックスイン]
    }
</スクリプト>

<スクリプト>
    '../mixin' から mixin をインポートします

    エクスポートデフォルト{
      ミックスイン: [ミックスイン],
      データ（） {
        戻る {
          ユーザー名: 'BComponent'
        }
      },
      作成された（）{
          this.sayHello()
      },
      メソッド: {
        こんにちは（）{
          console.log(`こんにちは、${this.userName}`)
        }
      }
    }
</スクリプト>

エクスポートconst COMMON_SELECT = [
    { コード: 0、ラベル: 'はい'},
    { コード: 1、ラベル: 'いいえ'}
];

'../constants/Dictionary.js' から { COMMON_SELECT } をインポートします。

エクスポートデフォルト{
    データ（） {
        戻る {
            comSelectオプション: COMMON_SELECT
        }
    }
}

<v-mode="selStatus" を選択">
    <el-option v-for="comSelectOptions 内の項目" :key="item.code" :label="item.label" :value="item.code"></el-option>
</選択>

'../constants/Dictionary.js' から { COMMON_SELECT } をインポートします。

エクスポートデフォルト{
  フィルター:
    comSelectFilter: (値) => {
      const ターゲット = COMMON_SELECT.filter(item => {
        アイテムコード === 値を返す
      })
      target.length ? target[0].label : 値を返す
    }
  }
}

'./mixin/filter' からフィルターをインポートします
Vue.mixin(フィルター)

<テンプレート>
    <div>
        ....
        {{ ステータス | comSelectFilter }}
        ....
    </div>  
</テンプレート>