Как динамически вводить смесь в компонент

У меня есть компонент, который требует микширования в зависимости от получаемых реквизитов.

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 в компонент?

Ответ 1

К сожалению, в настоящее время нет возможности динамически добавлять или удалять микшины для компонента. this var не доступен в этой области. И в самом раннем привязке жизненного цикла, beforeCreate, mixins уже загружены.

В вашем случае, в зависимости от того, что в timerMixin mixin, может иметь смысл сделать отдельный компонент таймера со связанной логикой, который может быть динамически загружен в шаблон Component A.

В противном случае всегда будет загружаться миксин, вероятно, будет не так уж плохо (по производительности), так как данные будут реактивными.

Ответ 2

Вы не сможете это сделать и это на самом деле по дизайну, а не случайно, как заявил Эван Вы в этот вопрос github:

Мне не нравится идея runtime mixins, потому что это делает поведение ваших компонентов непредсказуемым в зависимости от того, когда применяются микшины.

Это означает, что после факта вы не можете назначить mixin, и нет способа получить контекст this до загрузки mixin.

Я не совсем уверен, что вы намереваетесь делать здесь, но если вы просто не хотите запускать таймер-микс, то вы можете сделать чек в созданных вами микшинах, прежде чем предпринимать какие-либо дальнейшие действия ( Я лично также добавлю hasTimer prop к mixin, но я сохраню его, как вы его получили), поэтому вы получаете:

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/