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 
} 

믹스 인을 구성 요소에 동적으로 주입 할 수있는 방법이 있습니까?

Answer 1

현재 불행히도, 현재 구성 요소에 대한 믹스를 동적으로 추가하거나 제거 할 방법이 없습니다. this var은 해당 범위에서 사용할 수 없습니다. 그리고 가장 초기에 lifecycle hook, beforeCreate, 믹스 인이 이미로드되었습니다.

timerMixin mixin의 내용에 따라 Component A 템플릿에 동적으로로드 할 수있는 관련 로직이있는 별도의 타이머 구성 요소를 만드는 것이 좋습니다.

그렇지 않으면 데이터가 반응적일 수 있으므로 항상 mixin을로드해도 성능이 좋지 않을 것입니다.

Answer 2

당신은이 작업을 수행 할 수 될 수 없습니다 및 this github issue에서 에반 귀하가 언급 한대로, 디자인,하지 사고 사실이다 :

내가 런타임이나 mixin의 아이디어를 좋아하지 않는다 때문에 믹스 인이 적용되는시기에 따라 구성 요소의 동작을 예측할 수 없게 만듭니다.

이것은 사실 후 mixin을 할당 할 수 있으며, mixin로드되기 전에 this 컨텍스트를 얻을 수있는 방법은 존재하지 않습니다.

여기서는 어떤 것을 목표로하고 있는지 잘 모르겠지만 단순히 타이머 믹스를 초기화하고 싶지 않다면 추가 작업을하기 전에 생성 된 믹스 인을 확인해 볼 수 있습니다 당신이 얻을 수 있도록, (나는 개인적으로도 믹스 인의 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/