Meningkatkan templat Vuejs dengan komponen bersyarat

Question

Saya mempunyai senarai acara yang berbeza seperti yang ditunjukkan di bawah, ia diimport sebagai logTypes

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

Untuk dua acara ini saya ada 2 komponen berbeza.

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

Dalam templat saya, saya ada ini

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

Semuanya berfungsi dengan baik tetapi saya mahu menjadikannya lebih mudah dibaca

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

Saya ingin mengulang logTypes dan pilih komponen berdasarkan itu dan bukannya jika dan lain-lain?

Sebarang bantuan pasti bagus. terima kasih.

Answer 1

Cuba gunakan LOGIN 和 LOGOUT 命名组件，如 logTypes Objek:

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

Kemudian gunakan komponen terbina dalam component 并将 is 属性绑定到 item.action :