1

似乎默认情况下teleport不会使用renderToString.

有谁知道如何teleport在 Vue3 中渲染和水合组件？

我在这里找到了一些测试，但无法弄清楚如何将其应用于现实世界的示例，也找不到有关此主题的任何信息。

4

1 回答 1

0

好吧，您可以在ssr中加载传送，但我不确定您是否可以补水。考虑这个例子

html.js
   <html>
   <head>${context.teleports.head}</head>
   <body></body>
   </html>

App.vue
   <template>
      <teleport to="head">
        <title>Hello world</title>
        <meta name="viewport" content="width=device-width">
      </teleport>
      <div id="#app">This is app</app>
   </template>

Output (html)
   <html>
   <head>
     <title>Hello world</title>
     <meta name="viewport" content="width=device-width">
   </head>
   <body></body>
   </html>

这里我们正在渲染我们的传送，所以即使没有js我们也可以设置一些数据。但我们不能给它补水，因为它没有任何联系。取而代之的是，传送将被附加一次，我们将获得重复的传送内容。

所以我所能做的就是使用这个解决方法。在 App.vue 挂载之前，我们删除了旧的 Teleport，以便新的可以替换它。这不是水合作用，因此对于大型组件来说速度较慢，但​​它运作良好。

App.vue
  <script>
    export default {
      name: 'App.vue',
      created() {
        if(window !== undefined) document.head.innerHTML = '';
      }
    }
  </script>
于 2021-06-23T11:15:16.870 回答