Can I use two identical components in the same application?

Question

In some cases you want to invoke a popup or non-popup window

<template>
<!-- Pop-up window -->
<v-dialog v-model="popupFlag">
    <A :prop-option="option">
</v-dialog>


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

import A from "C.vue"
import B from "C.vue"

export default {

    props: {
        popupFlag: {
            type: Boolean,
            required: true,
            default: false,
        }
    },
    data() {
        return: {
            option: 'blah'
        }
    }
    
}

I configured the code as follows, is this the correct code? Can I use the same components? (C.vue)

Answer 1

Yes, of course it is possible to use the same component multiple times in a parent component. Each time you insert it into a template, a new instance of the component is created. So, in your case, your code can be simplified as follows:

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

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

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

Or, a simpler way is:

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

This way, you can efficiently reuse the same component with different options based on popupFlag.