在 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
      }
    });

索引.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

您可以使用動態組件

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

然后將 myComponent 的值更改為您要加載的組件。

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

將渲染調試組件