how to pass children in Vue 3 and TSX

Question

everybody.

I have an issue while passing children with Vue 3 SFC and 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>

Props a got string of b and it's working well. But why is children undefined?

Answer 1

VueJS does not wrap a default slot in a children prop. You have to explicitly call the slot. Btw I think you should directly create a component in a tsx file and use a render function instead of the setup.

import { defineComponent } from 'vue';

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

I created a repository with few examples, I hope it can help you: https://github.com/shenron/vite-demo