运行时指令用于具有非元素根节点的组件。这些指令将无法按预期发挥作用

Question

我正在将 vue2 升级到 vue3，我在控制台中收到以下警告：

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. at <VNavigationDrawer modelValue=false onUpdate:modelValue=fn app="" > at <SideBar> at <VApp id="inspire" > at <App>

有人有什么想法吗？

Answer 1

<template>

中的第一个节点必须是div（或其他一些有效元素，但div对我有用，所以...）

<template>
    <div>
        ...
    </div>
</template>

如果您在包装之外添加其他内容

<div>

，则会发生此错误。

我不知道有问题的节点可能是什么，但我确实知道在关闭

</div>

和关闭

</template>

之间添加某些内容会触发此错误。

Answer 2

我出现了这个错误，其结构如下：

<template>
  <div />
  <CustomComponent /> // vue was not happy with this
</template>

对我来说，将 CustomComponent 移至父级解决了该错误。因此当有多个根节点时也会出现这种情况。 :)