[Function as Child Component] React 函数子组件在 Vue 中可以使用吗？

[baijunjie]

我不太确定Function as Child Component这个叫法是否正确

问题时这样的，我在使用一个 React UI 库，其中 Modal 组件的 close 方式是这样的：

<ModalContent>
  {(onClose) => (
    <>
      <Button onPress={onClose}>
        Ok
      </Button>
    </>
  )}
</ModalContent>

然而我使用 veaury 转换后，不知道该如何实现，我尝试了 slot scope 的方式

<VueModalContent>
  <template #default="{ onClose }">
    <VueButton onPress={onClose}>
        Ok
    </VueButton>
  </template>
</VueModalContent>

但是失败了，不知道如何是好，求救🆘

[devilwjp]

@baijunjie

这个例子中，react组件的children属性接受是一个函数类型的值作为render props，在vue中是scoped slot 对于slot default的处理，veaury固定处理为named slot，所以例子中的情况就直接用slot children作为scoped slot来解决

<script setup>
import { applyPureReactInVue } from 'veaury'
import ReactModalContent from 'ReactModalContent'
import ReactButton from 'ReactButton'
const VueModalContent = applyPureReactInVue(ReactModalContent)
const VueButton  = applyPureReactInVue(ReactButton)
</script>
<template>
  <VueModalContent>
    <template #children="onclose">
      <VueButton @press="onclose">
          Ok
      </VueButton>
    </template>
  </VueModalContent>
</template>

[baijunjie]

@devilwjp 有效！感谢！