Question

我正在创建一个选项卡组件，该组件将动态加载其v-tab-item组件，给定由tabName，id和tabContent组成的配置对象数组组件的资源位置。我已经成功加载了组件。但是，直到我切换选项卡，它们才真正初始化（或运行其created()方法）。我只是得到带有正确标签的空白标签。使用DOM检查器最初仅显示<componentId></componentId>，然后当我切换选项卡时，这些标签将替换为组件的所有内容。

如何在加载动态组件后立即对其进行初始化？

编辑：我在这里创建了CodePen：

https://codepen.io/sgarfio/project/editor/DKgQON

但这是我的第一个CodePen，因此我还没有弄清楚如何引用项目中的其他文件（即将tabContent设置为什么，以便require.js可以加载它们）。我在控制台中看到“拒绝访问”，这听起来像是找到了文件，但不允许访问它们，这很奇怪，因为所有文件都属于同一个项目。因此，我的CodePen甚至不如我的实际项目正常工作。但这可能会帮助某人了解我要做什么。

另外，经过一番戳后，我发现了这一点：

http://michaelnthiessen.com/force-re-render/

那表示我应该更改组件上的键，这将迫使组件重新呈现。我也发现了这一点：

https://vuejs.org/v2/guide/components-dynamic-async.html

其中有一个很好的示例说明了我要执行的操作，但是它并没有首先强制异步组件初始化。这就是我需要异步组件执行的操作-在我切换选项卡之前，它们不会初始化。实际上，它们甚至都不会出现在网络呼叫中。 Vue只是为它们生成一个占位符。

Answer 1

我知道了！我最终要做的是从加载异步组件的代码中发出一个事件，以指示该组件已加载。该事件的侦听器会统计已加载的组件数（它已经知道应该加载多少个组件），并且一旦接收到正确数量的这些事件，它就会更改this.active的值（ v-model组件的v-tabs值（指示当前哪个选项卡处于活动状态）设置为“ 0”。我尝试这样做是因为如前所述，每当切换选项卡时，异步组件都将加载/渲染。我还具有用于设置this.active的上一个/下一个按钮，今天我注意到，如果我使用“下一个”按钮而不是单击选项卡，则会加载异步组件，但不会使选项卡前进。我已经弄清楚了如何从加载代码中发出事件，因此我要做的就是捕获已加载组件的数量，然后操纵this.active。

我可能会尝试更新我的CodePen以反映这一点，如果这样做，我会回来并做出相应评论。现在，这是我最终得到的一个示例。我仍在添加一些东西以使其更健壮（例如，如果配置对象包含不存在的组件URL），但这是它的基本要旨。

created: function() {
  this.$on("componentLoaded", () => {
    this.numTabsInitialized++;
    if(this.numTabsInitialized == this.numTabs) {
      // All tabs loaded; update active to force them to load
      this.active = "0";
    }
  })
},
methods: {
  loadComponent: function(config) {
    var id = config.id;
    var compPath = config.tabContent;
    var self = this;
    require([compPath], function(comp) {
      Vue.component(id, comp);
      self.$emit("componentLoaded");
    });
  }
}

Vuetify和require.js：如何显示动态组件？

1 个答案: