Kann ich zwei identische Komponenten in derselben Anwendung verwenden?

Question

In manchen Fällen möchten Sie ein Popup- oder Nicht-Popup-Fenster aufrufen

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


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

A aus „C.vue“ importieren
B aus „C.vue“ importieren

Standard exportieren {

    Requisiten: {
        PopupFlag: {
            Typ: Boolesch,
            erforderlich: wahr,
            Standard: falsch,
        }
    },
    Daten() {
        zurückkehren: {
            Option: 'bla'
        }
    }
    
}

Ich habe den Code wie folgt konfiguriert. Ist das der richtige Code? Kann ich die gleichen Komponenten verwenden? (C.vue)

Answer 1

是的，当然可以在父组件中多次使用相同的组件。每次将其插入模板中时，都会创建一个新的组件实例。所以，在你的情况下，你的代码可以简化如下：

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

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

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

或者，更简单的方法是：

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

这样，你可以根据popupFlag以不同的选项高效地重用相同的组件。