render函數(shù)
vue通過 template 來創(chuàng)建你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時，需要用render來創(chuàng)建HTML。
什么情況下適合使用render函數(shù)
在一次封裝一套通用按鈕組件的工作中，按鈕有四個樣式(default success error )。首先，你可能會想到如下實現(xiàn)
<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>
這樣寫在按鈕樣式少的時候完全沒有問題，但是試想，如果需要的按鈕樣式有十多個，按鈕內(nèi)的文字根據(jù)實際情況而定(如success按鈕內(nèi)的文字可能是OK、GOOD等等)。那么template寫死的方式就顯得很無力了。遇上類似這樣的情況，使用render函數(shù)可以說最優(yōu)選擇了。
根據(jù)實際情況改寫按鈕組件
首先render函數(shù)生成的內(nèi)容相當(dāng)于template的內(nèi)容，故使用render函數(shù)時，在.vue文件中需要先把template標(biāo)簽去掉。只保留邏輯層。
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' } }};根據(jù)組件化思維，能抽象出來的東西絕不寫死在邏輯上。這里的clickHandle函數(shù)可以根據(jù)按鈕的type類型觸發(fā)不同的邏輯，就不多敘述了。
然后在父組件調(diào)用
<btn v-for="(btn, index) in testData" :type="btn.type" :text="btn.text" :key="index">{{btn.text}}</btn>使用jsx
是的，要記住每個參數(shù)的類型同用法，按序傳參實在是太麻煩了。那么其實可以用jsx來優(yōu)化這個繁瑣的過程。
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>)示例二：
在遇到寫類似的組件的時候需要寫很多很長的代碼，出于簡潔（懶惰使人進(jìn)步）的角度來說，我們應(yīng)該找到更合適的方法來實現(xiàn)該效果。
<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 函數(shù)就很好的解決了這個問題，先來簡單一點額例子，算是有基本的骨架了
<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> 然后進(jìn)一步給你的組件加入你想要的樣式需要事件，變得有血有肉
<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()下是很痛苦的，不利于維護(hù)。
所以通常會
var com1= createElement('p','item1');varcom2= createElement('p','item1');可以使用return createElement('div',[com1,com2])
這種情況是禁止的return createElement('div',[com1,com1])
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
