可以在同一個應用程式中使用兩個完全相同的元件嗎？

Question

在某些情況下，您想要呼叫一個彈出視窗或非彈出視窗

<template>
<!-- 彈出視窗 -->
<v-dialog v-model="popupFlag">
    <A :prop-option="option">
</v-dialog>


<!-- 主要內容 -->
<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'
        }
    }
    
}

我將程式碼配置如下，這是正確的程式碼嗎？ 我可以使用相同的組件嗎？ （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以不同的選項有效地重複使用相同的元件。