我目前正在将 Vue 2 代码库迁移到 Vue 3。
2
1009<card>
<template #default>
<card-header>
<title level="3">Header</title>
</card-header>
<card-body
v-for="b in bodyCount"
:key="'b' + b">
Body {{ b }}
</card-body>
<card-footer
v-for="f in footerCount"
:key="'f' + f">
<text>Footer {{ f }}</text>
</card-footer>
</template>
</card>
Card 组件有一个调用 this.$slots.default() 的渲染函数。然而，在 Vue 3 中，这会返回与 Vue 2 中不同的内容。因此，如果我执行 console.log(this.$slots.default()) - 我会得到一个包含 3 个元素的数组，[类型为“header”的 v 节点，类型为 Symbol(Fragment) 的 v 节点，类型为 Symbol(Fragment) 的 v 节点]
更具体地说，它不会将卡页脚/卡体识别为组件，而是我在类型中看到符号（片段）。 Card-header 实际上很好，因为它不在 v-for 循环中。
卡片组件的渲染函数内部有一个逻辑，需要知道它有多少个正文/页脚组件。所以我需要能够分辨组件类型。这在 Vue 3 中不可能吗？我可以猜测这与这里的 v-for 有关，但我不确定如何实际获取最终结果 v-nodes。在此示例中，我希望数组包含卡头 + 所有卡体 + 所有卡页脚，而不是 3 个元素。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
事实证明 - 可以通过数组每个元素上的 Children 属性来展开片段。因此，在这种情况下，v-for 会生成一个 v 节点，它是一个片段，但我们可以通过查看 Children 属性来推断更多内容。