在 v-for 循环中插入动态组件

Question

我目前有一个v-for根据名称值数组创建组件列表的组件。根据检查step === 'name'，我将显示相关组件。此方法要求我用 a 列出每个可能的组件，v-if并且我认为应该有一种更简洁的方法来实现此目的。

    <div v-for="(step, idx) in steps" :key="idx">
      <div v-if="step === 'url'">
        <Goto @removeStep="removeStep(idx)" />
      </div>
      <div v-if="step === 'click'">
        <Click @removeStep="removeStep(idx)" />
      </div>
      <div v-if="step === 'search'">
        <Search @removeStep="removeStep(idx)" />
      </div>
      ...
    </div>

我宁愿直接在 for 循环中插入组件。

例如，类似...

 <div v-for="(step, idx) in steps" :key="idx">
   <[step.component] @removeStep="removeStep(idx)" :title="step.title" />
 </div>

我的动态组件数组将如下所示：

steps: [
 {
  component: 'Goto',
  title: 'Go to Url'
 },
 {
  component: 'Click',
  title: 'Click Something'
 }
]

我不想将所有组件选项放在单个文件组件中，并且希望它们像我目前一样保留为单独的组件。

我可以使用某种形式的插值或计算的道具来完成上述任务吗？

Answer 1

Vue 支持动态组件<component is="COMPONENT_NAME">。您可以在本地注册组件，然后绑定<component>.is到数组中的组件名称steps：

<template>
  <div>
    <component
      :is="step.component"
      v-for="(step, idx) in steps"
      :key="step.component"
      :title="step.title"
      @remove-step="removeStep(idx)"
    />
  </div>
</template>

<script>
import Goto from './components/Goto'
import Click from './components/Click'
import Search from './components/Search'

export default {
  components: {
    Goto,
    Click,
    Search,
  },
  data() {
    return {
      steps: [
        {
          component: 'Goto',
          title: 'Go to Url',
        },
        {
          component: 'Click',
          title: 'Click Something',
        },
        {
          component: 'Search',
          title: 'Search the Internet',
        },
      ],
    }
  },
  methods: {
    removeStep(idx) {
      console.log('remove step', idx)
    },
  },
}
</script>

演示