如何在vue.js中创建组件并动态安装

问题描述

有没有一种方法可以在模板中动态创建和安装组件。我尝试过，但是没有用。下面是代码。我已经在有关如何实现此目标的代码上发表了评论。

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="12" class="d-flex flex-row">
        <v-btn color="success" @click="addField">Add Field</v-btn>
      </v-col>
      <v-col cols="12" sm="12" id="container">
        mounts components here
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Vue from "vue";

export default {
  methods: {
    addField() {
      //creates component
      let newComponent = Vue.component("some-component",{
        data() {
          return {
            name: "John"
          };
        },template: "<template><p>{{name}}</p></template>"
      });
      //insert component in template
      newComponent.$mount("#container");
    }
  }
};
</script>

解决方法

是的。您可以使用<component is="nameOfYourComponent"/>动态加载组件。 在codesandbox

中看到一个非常简单的示例

当然，文档：https://vuejs.org/v2/guide/components-dynamic-async.html

,

我不清楚您要实现的用例。

但是，也许您可​​以使用插槽（https://vuejs.org/v2/guide/components-slots.html）或动态和异步组件（https://vuejs.org/v2/guide/components-dynamic-async.html）来获得所需的内容