Bolehkah saya menggunakan dua komponen yang sama dalam aplikasi yang sama?

Question

Dalam sesetengah kes, anda mahu menggunakan tetingkap pop timbul atau bukan pop timbul

<template>
<!-- Tetingkap timbul -->
<v-dialog v-model="popupFlag">
    <A :prop-option="option">
</v-dialog>


<!-- Kandungan utama -->
<div v-if="!popupFlag">
    <B :prop-option="option">
</div>
</template>

import A daripada "C.vue"
import B daripada "C.vue"

eksport lalai {

    alat peraga: {
        popupBendera: {
            jenis: Boolean,
            dikehendaki: benar,
            lalai: palsu,
        }
    },
    data() {
        kembali: {
            pilihan: 'bla'
        }
    }
    
}

Saya mengkonfigurasi kod seperti berikut, adakah ini kod yang betul? Bolehkah saya menggunakan komponen yang sama? (C.vue)

Answer 1

Ya, sudah tentu boleh menggunakan komponen yang sama beberapa kali dalam komponen induk. Setiap kali ia dimasukkan ke dalam templat, contoh baru komponen dibuat. Jadi, dalam kes anda, kod anda boleh dipermudahkan seperti berikut:

<template>
  <!-- 主要部分 -->
  <div v-if="!popupFlag">
    <C :prop-option="option" />
  </div>

  <!-- 弹出部分 -->
  <div v-else>
    <C :prop-option="option" />
  </div>
</template>

...
import C from "C.vue"
...

Atau, cara yang lebih mudah ialah:

<C :prop-option="popupFlag ? optionForPopup : optionForMain" />

Dengan cara ini, anda boleh menggunakan semula komponen yang sama dengan cekap dengan pilihan berbeza bergantung pada popupFlag.