可以在同一个应用程序中使用两个完全相同的组件吗？

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以不同的选项高效地重用相同的组件。