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

Posted 2021-04-09

我正在创建一个tab组件，它动态加载其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只是为它们生成一个占位符。

答案

我搞定了！我最终做的是从加载异步组件的代码中发出一个事件，以指示该组件已加载。该事件的监听器会计算已加载了多少组件（它已经知道应该有多少组件），并且一旦收到正确数量的这些事件，它就会更改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");
    });
  }
}