render函数

Posted 2023-03-16

参考技术A

1､ 用template，但 切记template下只允许有一个子节点

2､用render函数

【Demo实例 https://jsbin.com/edit?html,output 】

1､第一个参数

​ 在render函数的方法中， 参数必须是createElement ,createElement的 类型是function
​ render函数的 第一个参数 是必选的，可以是 String | Object | Function

【Demo地址 https://jsbin.com/tiregac/edit?html,output 】

2､第二个参数

​ render函数的第二个参数是 可选 ，第二个参数是 数据对象（只能是Object）

【Demo地址 https://jsbin.com/jegezil/1/edit?html,output 】

3､第三个参数

​ 第三个参数是 可选 ，可以是 String | Array （作为我们 构建函数的子节点 来使用的）

【Demo实例 https://jsbin.com/robayuj/edit?html,output 】

【Demo实例 https://jsbin.com/bonenab/edit?html,output 】

【Demo实例 https://jsbin.com/watazed/edit?html,output 】

【Demo实例 https://jsbin.com/zawakaw/edit?html,output 】

【Demo实例 https://jsbin.com/ralinum/edit?html,output 】

【Demo实例 https://jsbin.com/tuvunam/1/edit?html,output 】

Vue render函数认识和使用

参考技术A 在render函数的方法中，参数必须是createElement。其中createElement的类型是function，这是vue中已经定义好了的。

1、第一个参数是String时

2、第一个参数是Object时

3、第一个参数是Function时

使用render函数可以对插槽内容进行重新排序，有效减少重绘带来的影响

在on里面的input函数不是箭头函数，这个this指的是window而不是Vue实例，所以要提前赋值好给self，避免拿的不是Vue实例

需求：将上述例子改成用v-model指令

this.$scopedSlots.default() 是作用域插槽提供的方法

以前通过 this.text 变成了 context.props.text 才能拿到
以前通过 this.$slots.default 现在变成 context.children 才能拿到