Meningkatkan templat Vuejs dengan komponen bersyarat
P粉790819727
P粉790819727 2024-04-03 16:16:14
0
1
353

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.

P粉790819727
P粉790819727

membalas semua(1)
P粉511757848

Cuba gunakan LOGINLOGOUT 命名组件,如 logTypes Objek:

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

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



Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!