如何通过Vue 3和TSX的儿童

Question

所有人。

我在通过Vue 3 SFC和TSX的孩子时遇到了一个问题。

<script lang="tsx" setup>
...
const DrugBoxWrap = ({ a, children }) => {
console.log(a) // b
console.log(children) // undefined
return (
<>
{children}
</>
)
}
</script>

<template>
<DrugBoxWrap a="b"> Hello </DrugBoxWrap>
</template>

道具a得到了一串b，运行良好。但为什么children没有定义？

Answer 1

VueJS不会在子道具中包装默认插槽。你必须明确地调用插槽。顺便说一句，我认为你应该直接在tsx文件中创建一个组件，并使用渲染函数而不是设置。

import { defineComponent } from 'vue';
export default defineComponent({
name: 'DrugBoxWrap',
render(c) {
return (
<>
{c?.$slots?.default?.()}
</>
)
},
})

我用几个例子创建了一个存储库，希望它能对您有所帮助：https://github.com/shenron/vite-demo