這篇文章帶給大家的內容是關於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型別觸發不同的邏輯,就不多敘述了。
然後在父元件呼叫
2ca5b83124d1c70f8ddaffa0be94a8dda1cb88e6789f399807801ea3799938af
使用jsx
是的,要記住每個參數的類型同用法,按序傳參實在是太麻煩了。那其實可以用jsx來優化這個繁瑣的流程。
render() { return ( 3f08712530dae5c6de207c1fb4513106 {this.text} 16b28748ea4df4d9c2150843fecfba68 ); },
以上是vue中render函數在什麼情況下適合使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!