Question

我有一个要在app.vue中加载的组件。我有一个按钮，用来调用方法来尝试添加该组件的另一个实例，因此我可以在页面上拥有该组件的许多实例

当我调用div.append（EquipmentInput）;时，它只是将[object Object]附加到DOM。

html：

            <div id="eDiv">
            <EquipmentInput></EquipmentInput>
                <button class="block mx-auto px-4 py-2 rounded-full bg-gray-200 hover:bg-blue-300 hover:font-bold" v-on:click.prevent="addEquipmentLine">+</button>
            </div>
            <div class="text

方法：

addEquipmentLine(){
            let eDiv = document.getElementById('eDiv');
            eDiv.append(EquipmentInput);
            },

我认为它应该附加该组件的另一个实例，但只是附加该对象文本。

Answer 1

我相信您会这样做：Inserting in DOM。

使用var ( _, b, _, _ = runtime.Caller(0) basepath = filepath.Dir(b) )代替ID
创建一个新元素，然后$ref
获取父级的$mount并以这种方式附加DOM元素

$ref

const EquipmentInput = Vue.extend({
  template: "<div>Hello World</div>"
});

const app = new Vue({
  el: "#app",
  components: {
    EquipmentInput
  },
  methods: {
    add() {
      const instance = new EquipmentInput();
      instance.$mount();
      this.$refs.ediv.appendChild(instance.$el);
    }
  }
});

如何在按钮单击时附加组件

1 个答案: