Vue之render渲染函数和JSX的应用

一.模板缺陷

• 模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余

哈哈
哈哈
哈哈

Level组件需要对不同的type产生不同的标签

二.函数式组件

• 函数式组件没有模板,只允许提供render函数

export default {
 render(h) {
  return h("h" + this.type, {}, this.$slots.default);
 },
 props: {
  type: {
   type: Number
  }
 }
};

复杂的逻辑变得非常简单

三.JSX应用

• 使用jsx会让代码看起来更加简洁易于读取

export default {
 render(h) {
  const tag = "h" + this.type;
  return {this.$slots.default};
 },
 props: {
  type: {
   type: Number
  }
 }
};

四.render方法订制组件

• 编写List组件可以根据用户传入的数据自动循环列表

通过render方法来订制组件,在父组件中传入render方法

render(h, name) {
   return {name};
 }

我们需要createElement方法，就会想到可以编写个函数组件，将createElement方法传递出来

ListItem.vue调用最外层的render方法，将createElement和当前项传递出来

五.scope-slot

• 使用v-slot 将内部值传即可

六.编写可编辑表格

• 基于iview使用jsx扩展成可编辑的表格

转载于:https://www.cnblogs.com/jiajialove/p/11511705.html