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>
      )
    },
})
複制代碼