Vue.js之render函数使用详解

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。

在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容

Hello world!

我们尝试使用render函数实现上面的例子,注意使用render函数,template 选项将被忽略。

createElement接收3个参数:

第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;
第二个为数据对象{Object}(可选);

示例如下:

Hello world! this is footer slot

this is header slot

渲染如下:

Vue.js之render函数使用详解_第1张图片

到此这篇关于Vue.js之render函数使用详解的文章就介绍到这了,更多相关Vue.js之render函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue.js之render函数使用详解)