React 中 Render Props 怎么在 Vue 里实现类似效果？

博主宁馨提问于 2026-03-25 10:02:28 阅读 4

框架

最近在用 Vue 3 写组件，想复用一些逻辑，听说 React 里可以用 Render Props 模式。但我试了下不知道怎么在 Vue 里模拟类似的行为。比如我想让子组件决定怎么渲染父组件传下来的数据，但又不想用 slot-scope（因为逻辑比较复杂）。

我试着写了个组件，但感觉不太对，数据传不进去或者渲染不出来。下面是我写的简单例子：

<template>
  <div>
    <DataProvider v-slot="{ data }">
      <p>{{ data.message }}</p>
    </DataProvider>
  </div>
</template>

<script setup>
import DataProvider from './DataProvider.vue'
</script>

是不是 Vue 根本不需要 Render Props？还是我用法错了？

我来解答赞 1 收藏

反馈

1 条解答

Code°海利 Lv1

当时我也卡在这，不过后来发现 Vue 里其实有更优雅的方式来处理这种需求，那就是作用域插槽。虽然你说不想用 slot-scope 因为逻辑复杂，但实际上 Vue 的作用域插槽完全可以满足 Render Props 的需求，而且更符合 Vue 的设计理念。

你提到的这种写法本身没错，只是可能在 DataProvider 组件内部没有正确地传递数据。你需要确保 DataProvider 组件通过来传递数据。

下面是一个简单的例子：

然后在你的 DataProvider.vue 文件里，你需要这样写：

这样，DataProvider 就会把 providerData 作为 data 属性传递给使用它的组件，你就可以在插槽里访问到它了。这种方式既能复用逻辑，又能保持组件的灵活性，我觉得比直接搬用 Render Props 更合适 Vue。希望这能帮到你，踩过这种坑的感觉确实挺折磨人的。

2026-03-25 10:29