Erweitern von Vuejs-Vorlagen mit bedingten Komponenten

Question

Ich habe eine Liste verschiedener Ereignisse wie unten gezeigt, sie wird importiert als logTypes

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

Für diese beiden Veranstaltungen habe ich 2 verschiedene Komponenten.

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

In meiner Vorlage habe ich das

<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>

Alles funktioniert gut, aber ich möchte es lesbarer machen

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

Ich möchte eine Schleife durchlaufen logTypes und die Komponente darauf basierend auswählen, statt auf „if“ und „sonst?“

Jede Hilfe wäre großartig. Danke.

Answer 1

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

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

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