如何使用 vue js 将组件/字段动态注入虚拟页面？

Question

我正在尝试创建一个虚拟 vue 页面，是否应该将页面中使用的不同组件（如 b-field 、b-table 等）注入页面以使事情更加动态。目前，字段和组件是在 .vue 页面的模板部分中定义的。

<template>
  <div class="container is-fluid">
    <b-loading :is-full-page="true" :active.sync="this.isLoading"></b-loading>
    <p class="subtitle">Business Unit</p>
    <b-field label="Business Unit">
      <b-input
        required
        :disabled="this.newRecord ? false : true"
        :value="this.objectData.id"
        @input="(newValue)=>{updateValue(newValue,'id')}"
      ></b-input>
    </b-field>
    <b-field label="Description">
      <b-input
        :value="this.objectData.description"
        @input="(newValue)=>{updateValue(newValue,'description')}"
      ></b-input>
    </b-field>
    <b-field label="Short Description">
      <b-input
        :value="this.objectData.shortdescription"
        @input="(newValue)=>{updateValue(newValue,'shortdescription')}"
      ></b-input>
    </b-field>
    <b-field label="Status">
      <b-autocomplete
        :value="this.objectData.status"
        :open-on-focus="true"
        :keep-first="true"
        :data="['Active','InActive']"
        @input="(newValue)=>{updateValue(newValue,'status')}"
       ></b-autocomplete>
    </b-field>   

    <section>
      <p class="is-size-7 has-text-danger">{{submitError}}</p>      
      <b-button @click="submitForm" class="is-radiusless">Submit</b-button>
      <b-button type="is-text" @click="$router.go(-1)" class="is-radiusless">Return</b-button>
    </section>
  </div>
</template>

<script>
import { viewMixin } from "../viewMixin.js";
const ViewName = "BusinessUnitDetail";
export default {
  name: "BusinessUnitDetail",
   mixins: [viewMixin(ViewName)],
};
</script>  

但是模板部分中提到的组件实际上应该存储为一个字符串，并且将来这个字符串将从数据库中检索。但是暂时作为起点，这个字符串可以在脚本部分本身进行硬编码。现在我需要一个解决方案或指导如何实现这一点并使页面实际工作..

注意：请注意，在 vue js 中，我知道我们可以使用 v-if 和 v-else 等 Vue 条件结构基于应用程序状态显示或隐藏组件。但这不是我在说的。相反，我希望将组件（b-field、b-table 等）动态注入到 DOM 中。因此，如果将来会有额外的 b 字段或任何其他组件，我可以简单地将组件标记附加到字符串中，并且该新组件将成功呈现在前端。请帮助？

Answer 1

我猜你正在寻找的解决方案是vue dynamic components。

所以你可以这样做：

<template v-for="(item, index) of components" :key="index">
   <component :is="item.name" :any-prop="item.anyProp">
</template>

...
<script>
// ...
data() {
  return {
    components: [
      { name: 'b-field', anyProp: 'status' }
    ]
  }
}
</script>