使用开槽组件时的 Nuxt/Vue 水合问题

Question

我有一个新的 nuxt 项目，在该项目中我遇到了一些奇怪的水合作用问题。我尝试尽可能地隔离问题来演示（见图）。

水合错误仅间歇性发生。

谁能帮我解决这个问题吗？

Group.vue - 带有插槽并渲染标签道具的组件

<template>
  <div>
    {{ label }}
    <slot></slot>
  </div>
</template>

<script setup>
  defineProps(['label'])
</script>

new-form-2.vue - 使用插槽中的输入渲染 Group 组件

<template>
  <Group label="firstname">
    <input type="text">
  </Group>
</template>

default.vue - 一个带有插槽的空布局组件

<template>
    <slot />
</template>

chunk-BVQHDTV7.js:1449 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <Group label="firstname" > 
  at <NewForm2 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/new-form-2" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/new-form-2', hash: '', query: {…}, name: 'new-form-2', path: '/new-form-2', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

我已尝试尽可能地隔离问题，但仍不清楚为什么会出现水合作用问题。

Answer 1

当服务器和客户端渲染之间的元素数量或结构存在差异时，就会出现子节点不匹配的情况。

用

包裹你的 new-form2.vue

<template>
  <div>
    <Group label="firstname">
      <input type="text">
    </Group>
  </div>
</template>

通过如上所述将内容包装在 a 中，可以确保服务器渲染的 HTML 和客户端 vDOM 之间的结构一致，这应该可以解决水合错误。

你还需要包装你的layout.vue.. 在这里了解更多 https://nuxt.com/docs/guide/directory-struct/layouts