render函數

vue通過 template 來創建你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時，需要用render來創建HTML。

render方法的實質就是生成template模板；

通過調用一個方法來生成，而這個方法是通過render方法的參數傳遞給他的；

通過這三個參數，可以生成一個完整的模板

官網實例

//未使用render函數Vue.component('anchored-heading', { template: '#anchored-heading-template', props: {  level: {   type: Number,   required: true  } }})//使用render函數Vue.component('anchored-heading', { render: function (createElement) {  return createElement(   'h' + this.level,  // tag name 標簽名稱   this.$slots.default // 子組件中的陣列  ) }, props: {  level: {   type: Number,   required: true  } }})

說明

區別：

createElement方法，通過render函數的參數傳遞進來，有三個參數：

什么情況下適合使用render函數

在一次封裝一套通用按鈕組件的工作中，按鈕有四個樣式(success、error、warning、default)。首先，你可能會想到如下實現

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div> <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div> <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

這樣寫在按鈕樣式少的時候完全沒有問題，但是試想，如果需要的按鈕樣式有十多個。那么template寫死的方式就顯得很無力了。遇上類似這樣的情況，使用render函數可以說最優選擇了。

根據實際情況改寫按鈕組件

首先render函數生成的內容相當于template的內容，故使用render函數時，在.vue文件中需要先把template標簽去掉。只保留邏輯層。

export default { props: {  type: {   type: String,   default: 'normal'  },  text: {   type: String,   default: 'normal'  } }, computed: {  tag() {   switch (this.type) {    case 'success':     return 1;    case 'danger':     return 2;    case 'warning':     return 3;    default:     return 1;   }  } }, render(h) {  return h('div', {   class: {    btn: true,    'btn-success': this.type === 'success',    'btn-danger': this.type === 'danger',    'btn-warning': this.type === 'warning'   },   domProps: {    innerText: this.text   },   on: {    click: this.handleClick   }  }); }, methods: {  handleClick() {   console.log('-----------------------');   console.log('do something');  } }};