Vue子组件的结构

时间:2019-06-14 04:41:56

标签: vue.js vue-component vuex vue-router

我有一个Vue项目,其结构如下:

Root app
   View 1
      ComponentA
         ComponentB
      ComponentA
         ComponentB
      ...
      ComponentA
         ComponentB

   View 2
      ComponentC
   View 3
      ComponentA
         ComponentB
   View4
      ComponentD
   ...

该问题专门与ComponentB有关。现在,ComponentB是ComponentA的子级。问题在于,ComponentB每页加载多次,而实际上只需要每页加载一次。我希望将其重构为每页一个ComponentB副本。我目前看到两种方法来实现这一目标:

  1. 将ComponentB提取为ComponentA的子项,并将其添加到可能需要它的任何视图中(使用存储来管理全局状态)。 这里的困难在于,我必须将其添加到可能需要该组件的每个视图中(这将要求我将其添加到应用程序的许多页面中,这不利于重构的目的)

  2. 提取ComponentB并将其添加到根组件(App.vue)。 这里的困难在于,即使用户不需要它也总是加载它。

是否有更好的方法来完成此操作,或者是否有一种普遍接受的方法是仅在需要时加载组件(基于商店中的触发器或其他某种触发器)?

0 个答案:

没有答案