使用条件组件增强 Vuejs 模板

Question

我有一个不同事件的列表，如下所示，它被导入为 logTypes

export default {
  LOGIN: "login",
  LOGOUT: "logout",
}

对于这两个事件，我有 2 个不同的组件。

<LogTypeLogin :item="item" />
<LogTypeLogout :item="item" />

在我的模板中，我有这个

<template #item.event="{ item }">
  <div v-else-if="item.action === logTypes.LOGIN">
     <LogTypeLogin :item="item" />
  </div>
  <div v-else-if="item.action === logTypes.LOGOUT">
     <LogTypeLogout :item="item" />
  </div>
  <div v-else>
    Nothing
  </div>
</template>

一切工作正常，但我想让它更具可读性

在 <template #item.event="{ item }">

我想循环遍历 logTypes 并在此基础上选择组件而不是 if 和 else？

任何帮助都会很棒。谢谢。

Answer 1

尝试使用 LOGIN 和 LOGOUT 命名组件，如 logTypes 对象：

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

然后使用内置组件 component 并将 is 属性绑定到 item.action ：