這篇文章帶給大家的內容是關於vue中render函數在什麼情況下適合使用？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
render函數
vue透過 template 來建立你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的程式設計能力。此時，需要用render來建立HTML。
什麼情況下適合使用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('p', {
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');
}
}
};根據元件化思維，能抽像出來的東西絕不寫死在邏輯上。這裡的clickHandle函數可以根據按鈕的type型別觸發不同的邏輯，就不多敘述了。
然後在父元件呼叫
<Button type="danger" text="test"></Button>
使用jsx
是的，要記住每個參數的類型同用法，按序傳參實在是太麻煩了。那其實可以用jsx來優化這個繁瑣的流程。
render() {
return (
<div
class={{
btn: true,
'btn-success': this.type === 'success',
'btn-danger': this.type === 'danger',
'btn-warning': this.type === 'warning'
}}
onClick={this.handleClick}>
{this.text}
</div>
);
},以上是vue中render函數在什麼情況下適合使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
