Смонтировать компонент в DOM с помощью JS в Vue.js

Question

Я создаю графический интерфейс для веб-игры с Vue.JS, теперь я использую http-vue-loader , чтобы избежать использования Webpack и подобных (извините, но я действительно ненавижу это).

Теперь, обычно, я делаю так, чтобы мой компонент добавлялся в мой DOM:

GUI.js

    // Creating Vue.js istance for GUI
    Pixua.GUI = new Vue({
      el: '#GUI',
      components: {
        'Debug': httpVueLoader('./gui/windows/Debug.vue')
      },
      data: {
        row: 0,
        column: 0
      }
    });

Index.html

<div id="GUI">
      <windows id="windows">
           <debug v-bind:row="row" v-bind:column="column" ></debug>
      </windows>
</div>

Debug.vue (это мой компонент)

<template>
  <px-window title="Debug" :width="200" :is-open.sync="isOpen">
      Casella cliccata:
      <ul>
        <li>Riga: {{row}}</li>
        <li>Colonna: {{column}}</li>
      </ul>
  </px-window>
</template>

<script>
module.exports = {
    props: ['row','column'],
    data: function() {
        return {
            isOpen: true
        }
    }
}

</script>

<style>
</style>

Теперь мой вопрос: можно ли динамически монтировать / рендерить компонент в DOM с помощью JS (через GUI.js) и без указания его в index.html (так, без <debug v-bind:row="row" v-bind:column="column" ></debug>)?

Answer 1

Вы можете использовать Динамические компоненты

<component v-bind:is="myComponent"></component>

А затем измените значение myComponent на компонент, который вы хотите загрузить.

data() {
    return {
        myComponent: 'debug'
    }
}

Визуализирует компонент отладки