跨页面重用相同组件（具有相同道具）的最佳方法

Question

我用的是vue-cli 3.在main.js中注册了全局模态组件：

Vue.component('Modal', Modal)
Vue.component('Feedback', Feedback)

然后我在每个页面中都使用了这些组件：

<Modal
  @close="closeModal"
  title="Feedback form"
  :visible="isModalVisible"
  :isActive="isActive"
>
  <template slot="body">
    <Feedback
      :clearValues="clear"
      @close="closeModal"
      @loader="toggleLoader($event)"
    />
  </template>
</Modal>

并包含带有所有必需方法的 mixin。现在我只是在每个页面上重复相同的组件（使用相同的道具）。我觉得这违反了 DRY 模式。也没有办法在模板中包含模板（就像在角度中一样）。在每个页面上重用我的模态组件的最佳方法是什么？

Answer 1

您可以将具有所需方法、属性等的组合提取到FeedbackModal 中，然后跨页面使用该新组件。此外，使用 Vue CLI 3，如果您使用 ES import/export 语句，则无需全局注册组件。