TLDR；我表明Vue可以使用JSX利用React渲染Prop模式。这里有源代码（https://github.com/darrenjennings/vue-jsx-render-props-example）

在Vue，通常我们讨论如何撰写模板/扩展/组合/开源我们的组件。这是有React经验的禁忌，开发者们大多数会在JSX写他们已经编译过的的HTML。

由于类似的架构，使用virtualdom + createElement（https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM） 的API和Vue js插件babel-plugin-transform-vue-js（https://github.com/vuejs/babel-plugin-transform-vue-jsx），我们可以写我们的Vue组件用我们在React中几乎相同的方式！（并不是所有组件都应该这样做，但是去感觉感觉设计模式并利用它们还是很有趣的一件事）。

更新：我常用的prop渲染方法，在rendersuggestion(https://github.com/educents/vue-autosuggest)，大家可以去看看！

props渲染的demo

为了演示，我将看一个使用Props的例子！迈克尔·杰克逊的文章。

首先是SFC（单文件组件）：

在我们父组件app.vue，鼠标的组件将由我们的子组件组成。在Mouse.js我们会通知renderprop函数回调渲染方法。你不能在模板用JSX，所以在SFC’s的方法部分混合了JSX。这个是我们的鼠标组件：

是的这是一个Vue组件，不是React。与React版本相比，两者之间的一些区别：

1. Vue已完成prop类型验证。

2. 你在模板中不能内联匿名函数返回JSX。我定义一个回调__render（只在渲染前抛出一个Vue警告提示）。你可以使用一个简单的Vue.js组件作为父组件去在传递信息通过一个匿名函数，但遗憾的是，我们实在用Vue开发，所以我们可以组合JSX在我们的模板中！

3. 我们通过这个（Vue实例）代替React状态，但利用解构都同样传回来的X和Y。

4. Vue明显的差异就是，组件是对象，不是JavaScript类，没有“设置状态”将是无用的数据属性（配套React的状态）来通过getter/setters 使用object.defineproperty。

5. onMouseMove和onMousemove

Vue渲染Prop，https://q9zm2j1jr9.codesandbox

这就是一个相当相似和可转移的组件设计。

作用域插槽

如果你想知道在Vue的等效模式是什么，它被称为作用域插槽（如果使用React的JSX是一样的）

埃文-你（@ youyuxi）2017年9月25日

Vue的创建者Evan在说通过Props渲染的时候。

如果你是用模板做“渲染prop”，一个类似的设计是使用作用域插槽，会是这个样子：

Vue使用模板作用域插槽很强大.https://5vxn0nzj0l.codesandbox.io

对作用域插槽的一些优点：

1. 自定义父子模板没有渲染功能或JSX。

2. 您可以轻松指定默认内容。在上面的示例中，我传递一个指定的槽，它定义了一个自定义消息，但是当我没有指定一个插槽时，它将回退到默认的插槽。默认插槽也为组件的用户提供了一个“组件API”，这样您就不必猜测您可能需要渲染什么。

3. 采用类似JSX解构提供回调

4. 使用子组件呈现的数据和父组件内容与模板是“内联”的。

5. 你可能永远无法内联JSX功能在你的模板（https://github.com/vuejs/vue/issues/7439）

结束语

为什么我要使用Prop渲染模式或JSX？好消息是使用渲染功能+ JSX是接近可以选择编译器和控制精细绘制的时候。你不可以使用自定义指令像V-model或v-if。Prop渲染本身有很多好处，this episode of Full stack radio（http://www.fullstackradio.com/79），亚当采访Kent C. Dodds有一个概述。

如果你是一个vue的用户，这类组件会带给你惊喜吗？如果是这样的话，我推荐你去阅读官方文档（https://vuejs.org/v2/guide/render-function.html#Basics）解释JSX和渲染的更详细的功能。

我很喜欢可以在框架之间共享设计原则。它给我模糊的暖暖的感觉，在一个残酷、冷酷的世界里，相信有一场关于框架的竞争。2018，试着找到共同点。

如果你喜欢阅读这篇文章，请跟我twitter（https://twitter.com/@darrenjennings），我的DM总是打开的！

进一步的阅读：

源代码：https://github.com/darrenjennings/vue-jsx-render-props-example

官方文件：https://vuejs.org/v2/guide/render-function.html#Basics

原创文章使用的渲染prop：https://cdb.Reacttraining.com/use-a-render-prop-50de598f11ce

在框架中会聚 React + Vue + Angular 一个有用的文章：http://varun.ca/convergence/

汇智网小智翻译。汇智网（www.hubwiz.com，vue.js 2、Angular5 、React 16，欢迎来试试！）