1.什么是render函数?

1)vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

2)render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容

2.举个栗子(来自vue官方文档)

代码说明: 
1. 最下面的new Vue方法很明显,是new了一个Vue的实例,挂载点#app这个dom; 
2. Vue.component这部分代码,第一个参数表示注册了一个Vue的组件,标签名是child(即 <child> 标签会被替换); 
3. 第二个参数中,template属性表示取找id=“template”的标签(另注,这个标签是<script>,或者是<div>,或者是template,或者是其他,没有影响),然后将这个标签作为组件的模板; 
4. props表示传递给这个组件的变量,通过标签中的v-bind:level这种形式传递变量level的值等于1。在这里的写法是限制变量类型为number,并且强制需要; 
5. slot表示内容分发,具体来说,就是把组件替换的源html标签里的内容(如 <child> 标签里面的内容,不包含 <child> 标签本身,这里是Hello world!),发在 <slot> 标签所在的位置(即放在<h1>-<h2> 这样的标签内); 
6. 如果还不理解,可以运行该段代码查看结果,或者去看vue的官方文档说明; 
7. 总的来说,顺序如下:注册一个组件,这个组件有模板,这个模板里有一个变量,变量的值通过父组件来传递,然后根据变量的值,通过v-if命令显示对应的html标签内容,然后在父组件里使用这个组件,让子组件显示需要显示的内容。

3.render ES6 箭头函数的写法:

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h 失去作用,在应用中会触发报错。

Logo

前往低代码交流专区

更多推荐