在vue-cil中使用render函数渲染组件

今天看了render函数渲染组件，主要是根据自己的需求来封装，现在封装一个根据不同状态显示不同按钮的组件：

render渲染函数官网解释：https://cn.vuejs.org/v2/guide/render-function.html#ad

如果在没有了解render函数之前，可能我们会这样封装：

以上的写法，无疑代码量多，如果再增加一种状态，又得c+v了。使用render函数整容一下：

components/Child.js
export default {
  props: {
    status: {
      type: Number,
      required: true,
    },
  },
  render(createElement) {
    const innerHTML = ["未开始", "进行中", "可领取", "已领取"][this.status];//这里传进来是几，就会选择数组中对应下标的元素
    return createElement("button", {
      class: {
        active: this.status,
      },
      attrs: {
        id: "btn",
      },
      domProps: {
        innerHTML,
      },
      on: {
        click: () => console.log(this.status),
      },
    });
  },
};

 然后使用：

又学到新东西了，欢迎和我一起讨论！

借鉴文章：微信公众号（前端日志周刊）的10个简单的技巧让你的vue.js代码更优雅