能否在Vue项目中复用同一组件？代码写法是否合规？

原代码的错误点 #

• 模板中组件标签未闭合：<A :prop-option="option"> 和 <B :prop-option="option"> 缺少闭合标签，Vue要求标签必须正确闭合，可改为 <A :prop-option="option"></A> 或自闭合写法 <A :prop-option="option" />
• data 函数语法错误：return 后面多了冒号，正确写法是 return { option: 'blah' }
• 重复导入同一组件：没必要分别用 A 和 B 导入同一个 C.vue，属于冗余操作

能否复用C.vue组件？ #

完全可以复用同一个 C.vue 组件，而且这才是更合理的写法。只需要导入一次组件，然后在弹窗和主内容区域分别使用该组件即可，不需要重复导入。

修正后的示例代码 #

<template>
  <!-- popup -->
  <v-dialog v-model="popupFlag">
    <C :prop-option="option" />
  </v-dialog>

  <!-- main -->
  <div v-if="!popupFlag">
    <C :prop-option="option" />
  </div>
</template>

<script>
import C from "C.vue"

export default {
  components: {
    C
  },
  props: {
    popupFlag: {
      type: Boolean,
      required: true,
      default: false,
    }
  },
  data() {
    return {
      option: 'blah'
    }
  }
}
</script>

如果需要在弹窗、主内容区这两个场景下给组件传递不同的参数，只需要调整:prop-option绑定的值即可，组件本身的复用不受场景影响。

内容的提问来源于stack exchange，提问作者baceeeee