VueJS - создать компонент программно по имени

Question

Я пытаюсь построить динамическую систему Vue, в которую я хочу вставить пользовательские компоненты, зная только их имя.Вдохновение от здесь заняло у меня:

  export default {
    name: 'MySite',
    mixins: [MyMixin],
    components: {MyComponent1, MyComponent2},
    ...
    }
    ...
    mounted() {
    
    var ComponentClass = Vue.extend(MyComponent1)
    var instance = new ComponentClass()
    instance.$mount() // pass nothing
    this.$refs.container.appendChild(instance.$el)
    }
 

Теперь я хочу сделать то же самое, но зная только имя компонента 'MyComponent1' как String.Как это сделать?Я предполагаю, что это больше связано с чистым JavaScript, чем с Vue, но я не могу понять, как это сделать.

Answer 1

Я обнаружил, что использование

this.$options.__proto__.components['MyComponent1']

работает и делает то, что я хочу.Это самое чистое решение?

Answer 2

ты прав - это просто js.

посмотрите на пример ниже, самое важное - eval()

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get getHeight() {
    return  this.height
  }
}

// js string code
var code = "new Polygon(15, 200)";
// convert it to code;
var cls = eval(code);

console.log(cls.getHeight)