Vue中render函数

1、需求

后台管理系统中，需要有一个学段的渲染，后端传来的数据是一个当前学校选择的学段id组成的一个数组。我前端需要根据id查出学段，并渲染在页面上。

2、正常写法。

按以前的经验直接开撸代码

至于grade函数不需要关注，只是一个传入学段id返回学段的函数。效果如下 此时已经实现需求。只需给样式加上微调即可。但是整个后台系统中有多处的类似需求。比如班级管理中一个班级可能有多个的负责老师。 按照以前的写法就需要在每一个地方使用v-for的循环渲染。虽然没多少代码，但我是一个很懒的人。

懒是推动查文档的动力。     ——尼古拉斯 · 小平不小

3 render函数

百度或者google，搜到的render函数中全是照搬Vue官网中如何使用render函数写一个动态生成 heading 标签的组件。只能查文档 渲染函数 & JSX，文档下方有一个详细的 Babel 插件介绍。很详细的介绍了如何使用一个render函数。实现我所需要的功能代码如下：

components: {
    tag: {
      props: {
        name: Array,
      },
      render: function (h) {
        return (
          <div>{
            this.name.map(item => {
              return <el-tag style={{marginBottom:'10px'}}>{item}</el-tag>
            })
          }
          </div>
        )
      },
    }
}
复制代码
           

实现的效果如下，此时已经完美实现需求。

稍加修改，将tag组件作为全局组件，就可以在项目中所有类似效果的地方直接使用，只需要传入一个数组。还可以添加更多的可配置项，比如事件的添加，具体使用可以点击上面的文档地址查看。

Vue.component('tag',{
    props: {
      name: Array,
    },
    render: function (h) {
      return (
        <div>{
          this.name.map(item => {
            return <el-tag style={{marginBottom:'10px'}}>{item}</el-tag>
          })
        }
        </div>
      )
    },
})
复制代码