Vue. js вызвать компонент по имени переменной?

Question

Возможно в Vue. js компонент вызова по имени переменной?

Компоненты зарегистрированы:

import Component1 from 'component1'
import Component2 from 'component2'
import Component3 from 'component3'

...

components: {
    Component1, Component2, Component3
},

И я ищу что-то вроде этого:

created() {
    var componentName = 'Component1';
    this.components[componentName]
}

Answer 1

Вы можете получить доступ к свойству компонентов следующим образом:

this.$options.components[componentName]

Answer 2

Просто базовый c пример того, как вы можете использовать динамический c компонент:

ссылка на jsFiddle, чтобы поиграть: ссылка здесь

<div id="app">
   <component v-bind:is="currentPage">
       <!-- component changes when currentPage changes! -->
       <!-- output: Updated About -->
   </component>
</div>

new Vue({
  el: '#app',
  data: {
    currentPage: 'home'
  },
  components: {
    home: {
      template: "<p>Home</p>"
    },
    about: {
      template: "<p>About</p>"
    },
    contact: {
      template: "<p>Contact</p>"
    }
  },
  mounted(){
   this.$options.components['about'].template = "<p>Updated About</p>"
    this.currentPage = 'about'
  }
})