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

Question

我正在使用 Vue.JS 为网页游戏制作 GUI，现在我使用 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>

现在我的问题是：是否可以使用 JS（通过 GUI.js）动态地将组件安装/渲染到 DOM 中，而无需在 index.html 中指定它（所以没有<debug v-bind:row="row" v-bind:column="column" ></debug>）？

Answer 1

您可以使用Dynamic components

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

然后把myComponent的值改成你要加载的组件。

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

将渲染调试组件