首頁 > 開發者 > JavaScript
Vue中render函數的使用方法，vuerender函數
render函數
vue通過 template 來建立你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時，需要用render來建立HTML。
什麼情況下適合使用render函數
在一次封裝一套通用按鈕組件的工作中，按鈕有四個樣式(default success error )。首先，你可能會想到如下實現
<div v-if="type === 'success'">success</div> <div v-else-if="type === 'error'">error</div> <div v-else-if="type === 'warm'">warm</div> <div v-else>default</div>
這樣寫在按鈕樣式少的時候完全沒有問題，但是試想，如果需要的按鈕樣式有十多個，按鈕內的文字根據實際情況而定(如success按鈕內的文字可能是OK、GOOD等等)。那麼template寫死的方式就顯得很無力了。遇上類似這樣的情況，使用render函數可以說最優選擇了。
根據實際情況改寫按鈕組件
首先render函數產生的內容相當於template的內容，故使用render函數時，在.vue檔案中需要先把template標籤去掉。只保留邏輯層。
export default { render(h) { return h('div',{ 'class': { btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }, domProps: { innerHTML: this.$slots.default[0].text }, on: { click: this.clickHandle } }) }, methods: { clickHandle() { // dosomething } }, props: { type: { type: String, default: 'default' }, text: { type: String, default: 'default' } }};
根據組件化思維，能抽象出來的東西絕不寫死在邏輯上。這裡的clickHandle函數可以根據按鈕的type類型觸發不同的邏輯，就不多敘述了。
然後在父組件調用
<btn v-for="(btn, index) in testData" :type="btn.type" :text="btn.text" :key="index">{{btn.text}}</btn>
使用jsx
是的，要記住每個參數的類型同用法，按序傳參實在是太麻煩了。那麼其實可以用jsx來最佳化這個繁瑣的過程。
return ( <div class={{ btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }} onClick={this.clickHandle}> {this.$slots.default[0].text} </div>)
樣本二：
在遇到寫類似的組件的時候需要寫很多很長的代碼，出於簡潔（懶惰使人進步）的角度來說，我們應該找到更合適的方法來實現該效果。
<body> <div id="app"> <mycomment :level="2"> 這是h2元素 </mycomment> </div> </body> <script type="text/x-template" id="is"> <div> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6> </div> </script> <script> Vue.component('mycomment',{ template:'#is', props:{ level:{ type:Number, required:true, } } }) var app =new Vue({ el:'#app', }) </script>
這時候Render 函數就很好的解決了這個問題，先來簡單一點額例子，算是有基本的骨架了
<body> <div id="app"> <render-teample :level="4"> render function </render-teample> </div> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, this.$slots.default ) }, props: { level: { type: Number, required: true } } var app=new Vue({ el:"#app", }); </script>
然後進一步給你的組件加入你想要的樣式需要事件，變得有血有肉
<body> <div id="app"> <render-teample :level="4" > <div class="jah" slot="myslot">render function</div> </render-teample> </div> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, { 'class':{ show:true, hide:false, }, style:{ width:'200px', height:'400px', background:'red', }, attrs:{ name:'h-ex', id:'h-id' }, props:{ myprops:true, }, on: { click: function(event){ alert(this.num) } }, nativeOn:{ click:function(event) { alert(1111) } } }, [ this.$slots.myslot, createElement('div',{ domProps:{ innerHTML:'holle render' } }) ] ) }, props: { level: { type: Number, required: true } } }); var app=new Vue({ el:"#app", data:{ num:110 } }); </script>
注意：約束組件中 VNodes 必須是唯一的。
直接把所有元素寫在一個createElement()下是很痛苦的，不利於維護。
所以通常會
var com1= createElement('p','item1');varcom2= createElement('p','item1');
可以使用return createElement('div',[com1,com2])
這種情況是禁止的return createElement('div',[com1,com1])
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
