在 Vue.js 中使用 JS 将组件挂载到 DOM 中

Question

I'm making a GUI for a webgame with Vue.JS, now I'm using http-vue-loader to avoid using Webpack and similar (sorry but I really hate it).

Now, usually what I do for get my component into my DOM is this:

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 (it's my component)

<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>

Now my question is: is possible to get the component mounted/rendered into the DOM dinamically with JS (via GUI.js) and without specifying it into the index.html (so without <debug v-bind:row="row" v-bind:column="column" ></debug> )?

Answer 1

You can use Dynamic components

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

And then change the value of myComponent to the component you want to load.

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

Will render the debug component