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

Posted 2023-02-23

【中文标题】跨页面重用相同组件（具有相同道具）的最佳方法

【英文标题】：Best approach to reuse the same component (with same props) across the pages

【发布时间】：2019-05-28 04:37:33

【问题描述】：

我用的是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 模式。也没有办法在模板中包含模板（就像在角度中一样）。在每个页面上重用我的模态组件的最佳方法是什么？

【问题讨论】：

也许你可以看看Vue Plugins？可能无法解决所有问题，但它会摆脱一些烦人的重复代码。

【参考方案1】：

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

【讨论】：

然后我的发射将停止工作。无论如何，我将不得不再次在每个页面中注入FeedbackModal。

我不太清楚你的意思，但可能与这个问题和解决方法有关：github.com/vuejs/vue/issues/4332#issuecomment-263444492