如何让Vue在运行时使用AJAX发现加载到实例中的组件

我正在尝试在我的网站样板中实现Vue，该样板在Wordpress或Craft上运行，并使用twig模板。样板用于在页面之间进行转换，同时只加载更改的内容。目前，我正在将我的所有反应元素作为单独的Vue组件。其中一些通过“swupped”内容加载到应用程序中

因此，在下面的设置中，我在#app中运行了一个Vue应用程序，该应用程序在运行时编译，它有一个

页眉

和

页脚

组件。Swup处理#Swup中的内容，因此当用户单击链接时，这会发生变化。因此，有时它可能有纯文本内容，但有时它有一个

滑块

组件

<div id="#app">
  <header><header>
    <div id="#swup">
      ?<slider>?
    </div>
  <footer></footer>
</div>

---

但是，这不起作用：它不加载

滑块

组件，

页眉

和

页脚

组件停止工作。我觉得我在强迫Vue进入它不是为之构建的东西。

建议您为此使用VueJS自己的内置动画转换

更多：

• VueJS带Swup：
• VueJS有关动画/过渡的文档：
• 带有VueJS的动画：

但是，如果你真的想让它工作，你可以这样做：

const TextComponent={
模板：“这是一个文本组件”
}
常量OtherTextComponent={
模板：“这是另一个文本组件”
}
新Vue({
el:“应用程序”，
组成部分：{
TextComponent，
其他文本组件
},
数据：{
组件：“文本组件”
},
方法：{
更改组件（组件）{
如果（comp=='TextComponent'）{
this.comp='OtherTextComponent'
}否则{
this.comp='TextComponent'
}
}
}
})

更改组件

这个github问题帮助我让它正常工作：

我的原始设置（中断）与Iklion提供的设置有一点不同。Vue实例使用与Swup实例相同的容器，而不是将Swup封装在Vue容器中。将Swup放置在Vue实例之外也可以工作，如下所示：

<#swup>
  <#app>
    <header>
    <main>
    <footer>
  </#app>
</#swup>

我担心swup会更改整个页面，但实际上仍然只是切换出

主部分，因为
页眉和
页脚不会更改

Swup不是建议与VueJS一起使用的库-您可以在我的答案中的链接中找到一个关于该库的问题。尝试使用VueJS自己的转换函数。但这会将组件切换到内部和外部。但是我想切换出一个可能有多个组件的完整内容。喜欢在主页和关于页面之间切换。然后你需要一个路由器插件，例如vue路由器。它还支持（页面）转换。
<#swup>
  <#app>
    <header>
    <main>
    <footer>
  </#app>
</#swup>