如何使用 JavaScript 动态添加 Vue 组件答案

【问题标题】：How do I use JavaScript to dynamically add Vue components如何使用 JavaScript 动态添加 Vue 组件
【发布时间】：2020-05-07 22:13:43
【问题描述】：

我正在使用 Vue 创建状态页面。我决定用下拉菜单制作一个主列表。我的想法是我会使用占位符，然后当我准备好填写下拉菜单时，我会制作单独的 Vue 脚本并导入。

export default {
  components: {
    ListItem
  },
  data: () => {
    return {
      list: [
        {
          title: "Message Processor",
          open: false,
          sublist: [
            MessageProcessor, "placeholder", "ph3"
          ]
        },
        {
          title: "API",
          open: false,
          sublist: [
            "ph1", "ph2", "ph3"
          ]
        }

然后我使用这个循环来填充小节。

<ul v-show="list.open" class="list-item">
    <li class="sub-items"
     v-for="(item,index) in list.sublist" :key="index">
    {{ item }}
    </li>
</ul>

但是，当我将 MessageProcessor.vue 插入第一个占位符插槽时，如第一个代码块所示，我收到以下错误：

{ "staticRenderFns": [ null ], "_compiled": true, "beforeCreate": [
null ], "beforeDestroy": [ null ], "__file":
"src/components/Panels/MessageProcessor.vue" }

【问题讨论】：

我不完全清楚你想要做什么，而不是“回答”，但在 Vue 中，如果你只是更改模型 - 更改实际在 list.sublist 中的项目 - Vue将为您重新呈现它...但这就是您的 <ul v-show="list.open" ...> 应该已经在做的事情，我不确定您所说的“当我插入 MessageProcessor.vue 时...”是什么意思
错了。 {{ Component }} 只是试图返回 Component 构建器对象，而不是实际的实例化实例。您需要使用 createElement(component)，其中 createElement 是作为渲染函数的第一个参数传递的构建器函数。看看插槽。这可能是实现您想要做的任何事情的更好方法。

标签： javascript html css vue.js

【解决方案1】：

尚不清楚您的列表项组件是否具有特殊功能，或者它们只是很多 <li>s。如果只是数据，那么：与其将列表项移到单独的 Vue 组件中，不如使用简单的 Javascript 函数获得更好的结果。例如：

import { apiSublist } from './sublists'
...
    list: [
        {
            title: "API",
            open: false,
            sublist: apiSublist()
        },
    ]

function apiSublist() {
    return ['Option 1', 'Option 2', 'Option 3']
}

当然，您可以将整个“API”对象移动到一个函数中并进一步模块化。

如果您的列表必须使用 Vue 组件，那么这是 generic components 的完美案例。

// Generic component
<template>
    <ul v-show="list.open" class="list-item">
        // Assumes that every member of the sublist is a string component name
        <component :is="item" class="sub-items"
            v-for="(item,index) in list.sublist" :key="index" />
    </ul>
</template>

【讨论】：