具有预定义模板的水合Vue SSR组件

Question

我试图以一种非常规的方式使用Vue SSR。我不是使用单个SPA，而是使用Vue来渲染将以不同状态集成到CMS的独立组件。因此，组件必须是自包含的，并且不能绑定到任何上下文（例如，它们不能绑定到当前路由）。

我认为这种工作方式是：

• CMS渲染器以某种状态渲染组件的模板。例如，我有一个手风琴组件，它有两个状态，打开状态和关闭状态。
• CMS将以一种状态（例如，关闭）呈现手风琴。例如，这将包括模板条件，例如is-closed类。
• Vue将根据所提供的模板水合该成分并推断当前状态。

这里有一些虚拟标记用于演示：

<div class="accordion is-closed">My Accordion Content</div>

在Vue中，模板看起来像这样：

<div :class="{ 'accordion': true, 'is-closed': isClosed, 'is-open': isOpen }">My Accordion Content</div>

因此，基于使用的类，Vue组件应该能够推断isClosed将是true。

这可能吗？欢迎创意解决方案：）

谢谢！