web-dev-qa-db-ja.com

ミックスインをコンポーネントに動的に注入する方法

受け取る小道具に応じてミックスインが必要なコンポーネントがあります。

const timerMixin = {
    created() {
        console.log("Timer mixin injected")
    }
}

export default {
    name: 'Component A',
    props: ['hasTimer'],
    mixins: this.hasTimer ? [timerMixin] : [] // fails because `this` is not available here 
}

コンポーネントにミックスインを動的に注入する方法はありますか？

vue.jsvue-component
15
Srinivas Damam

Evan Youが このgithubの問題 で述べているように、これを行うことはできません。これは実際には設計によるものであり、偶然ではありません。

ランタイムミックスインの考え方は好きではありません。ミックスインが適用されるタイミングによっては、コンポーネントの動作が予測できなくなるためです。

これは、事後にmixinを割り当てることができず、thisがロードされる前にmixinコンテキストを取得する方法がないことを意味します。

ここで何をしようとしているのか完全にはわかりませんが、タイマーミックスインを初期化したくない場合は、さらにアクションを実行する前に、作成されたミックスインフックでチェックを行うことができます（個人的にはまた、ミックスインにもhasTimerpropを追加しますが、それはあなたが持っていた方法で保持します）。

var timerMixin = {
  created(){
    if(this.hasTimer){
      this.initTimer();
    }
  },
  methods: {
    initTimer(){
      console.log('Init Timer Mixin')
    }
  }
}


export default {
    mixins: [timerMixin],
    props: ['hasTimer']
  });
}

これがJSFiddleです： https://jsfiddle.net/gnkha6hr/

2
craig_h

残念ながら、現在のところ、コンポーネントのミックスインを動的に追加または削除する方法はありません。 this varは、そのスコープでは使用できません。そして、最も早い lifecycleフック 、beforeCreateでは、ミックスインが既にロードされています。

あなたの場合、timerMixinミックスインの内容によっては、Component Aのテンプレートに動的にロードできる関連ロジックを備えた個別のタイマーコンポーネントを作成することが理にかなっている場合があります。

そうでなければ、データが反応するので、常にミックスインをロードすることはおそらくそれほど悪くはないでしょう（パフォーマンス的に）。

2
thanksd