时间戳

首页 > 解决方案 > 如何使用 vueonrails 对嵌套组件或开槽内容进行 SSR？

ruby-on-rails - 如何使用 vueonrails 对嵌套组件或开槽内容进行 SSR？

问题描述

我正在尝试使用 Hypernova 和vueonrails助手将 Vue.js 组件添加到具有 SSR 支持的 Ruby-on-Rails 应用程序中。

我可以.html.erb使用这个助手从视图 () 中使用 Hypernova 渲染已注册的组件：

<%= render_vue_component('HelloWorld', message: 'Hello World from SSR!') %>

假设我的HelloWorld组件<slot>在其模板中有一个：

<template>
  <div class="helloworld">
    <h1>{{ message }}</div>
    <slot></slot>
  </div>
</template>

我想在.html.erbusing中复制类似以下内容render_vue_component：

<hello-world message="Hello World from SSR!">
  <hello-world>SSR Nested component</hello-world>
</hello-world>

我如何将子元素传递给render_vue_component助手，以便它们由 Hypernova 渲染？

标签： ruby-on-railsvue.js

解决方案

好吧，我分析了 repo 并通过查看它，我认为您应该使用render_vue_componentonly 来渲染根组件，例如当您使用@vue/climain.js启动项目时：

<%= render_vue_component('App', { router }) %>

我通过分析vueonrails源码得出了这个结论。

如果你查看render_vue_component 函数，它只需要标识符和一个数据对象，它在内部调用render_react_component.

通过这个签名，它根本不适合Vue 的渲染函数签名，即(element, children)或(element, attributes, children).

也许您通过在 repo 上打开一个问题来找到更好的支持。

但是在使用这个项目之前我会三思而后行，因为到目前为止还没有任何文档并且检查网站，似乎他们更专注于销售有关该项目的书籍而不是创建文档。

推荐阅读