在vue中使用render函数

Posted 2023-03-16

参考技术A 本文所讲的都是在自定义组件中使用render函数的栗子，更多内容请查看官网或者（ https://segmentfault.com/a/1190000010913794?utm_source=tag-newest ）

首先在根组件引用实例组件（使用vue-cl3的vue serve 启动服务， 点击详情 ）

首先需要知道的是，render函数并没有与v-model对应，你必须自己实现逻辑，这就是深入底层的代价，但是和v-model相比，这可以让你更好的控制交互细节

这里需要使用的是this.$scopedSlots

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 才能拿到