vue.js 使用 prop 进行渲染-CSDN博客

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版本相比，两者之间的一些区别：

Vue已完成prop类型验证。
你在模板中不能内联匿名函数返回JSX。我定义一个回调__render（只在渲染前抛出一个Vue警告提示）。你可以使用一个简单的Vue.js组件作为父组件去在传递信息通过一个匿名函数，但遗憾的是，我们实在用Vue开发，所以我们可以组合JSX在我们的模板中！
我们通过这个（Vue实例）代替React状态，但利用解构都同样传回来的X和Y。
Vue明显的差异就是，组件是对象，不是JavaScript类，没有“设置状态”将是无用的数据属性（配套React的状态）来通过getter/setters 使用object.defineproperty。
onMouseMove和onMousemove

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

作用域插槽

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

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

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

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

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

自定义父子模板没有渲染功能或JSX。
您可以轻松指定默认内容。在上面的示例中，我传递一个指定的槽，它定义了一个自定义消息，但是当我没有指定一个插槽时，它将回退到默认的插槽。默认插槽也为组件的用户提供了一个“组件API”，这样您就不必猜测您可能需要渲染什么。
采用类似JSX解构提供回调
使用子组件呈现的数据和父组件内容与模板是“内联”的。

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总是打开的！

进一步的阅读：