Vue中render开发的示例分析
导读:本文共4304.5字符,通常情况下阅读需要14分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 场景官网描述的场景当我们开始写一个通过 level prop 动态生成 heading 标签的组件,你可能很快想到这样实现:<scripttype="text/x-template"id="anchored-heading-template"><h2v-if="level===1"&... ...
目录
(为您整理了一些要点),点击可以直达。场景
官网描述的场景当我们开始写一个通过 level prop 动态生成 heading 标签的组件,你可能很快想到这样实现:
在这种场景中使用 template 并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,我们需要重复地使用 <slot></slot>。
虽然模板在大多数组件中都非常好用,但是在这里它就不是很简洁的了。那么,我们来尝试使用 render 函数重写上面的例子:
简单清晰很多!简单来说,这样代码精简很多,但是需要非常熟悉 Vue 的实例属性。在这个例子中,你需要知道当你不使用 slot 属性向组件中传递内容时,比如 anchored-heading 中的 Hello world!,这些子元素被存储在组件实例中的 $slots.default中。
createElement参数介绍
接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:
深入 data 对象
有一件事要注意:正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)。
条件渲染
既然熟读以上api接下来咱们就来点实战。
之前这样写
render这样写
列表渲染
之前是这样写的,而且v-for 时template内必须被一个标签包裹
render这样写
v-model
之前的写法
render这样写
Vue中render开发的示例分析的详细内容,希望对您有所帮助,信息来源于网络。