mixinをコンポーネントに動的に注入する方法

Question

私は受け取った小道具に応じてmixinを必要とするコンポーネントを持っています。

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 
} 

コンポーネントにmixinを動的に挿入する方法はありますか？

Answer 1

現在、コンポーネントのミックスインを動的に追加または削除する方法はありません。その範囲ではthis varは利用できません。そして最も早い時期にlifecycle hook、beforeCreate、ミックスインが既にロードされています。

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

そうしないと、データがリアクティブになるため、mixinの読み込みは常にパフォーマンスが悪くなりません。

Answer 2

あなたがこれを行うことができるようにするつもりされていないとあなたはthis github issueでエヴァンで述べたように、それはデザインではなく、事故によって実際にあります：

私は、実行時ミックスインのアイデアを好きではない、ので、ミックスインが適用される時期によってコンポーネントの動作が予測できなくなります。

これは事実の後mixinを割り当てることはできませんし、mixin負荷前thisコンテキストを取得する方法がないことを意味します。

私はあなたがここで何をしようとしているのかは完全にはわかりませんが、単純にタイマーmixinを初期化したくないのであれば、あなたが得るので、（私は個人的にも、ミックスインaswellにhasTimer小道具を追加するだろうが、私はあなたがそれを持っていたどのようにそれをしておこう）：

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/