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)容相當于template的內(nèi)容，故使用render函數(shù)時，在.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' } }};根據(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>)示例二：
在遇到寫類似的組件的時候需要寫很多很長的代碼，出于簡潔（懶惰使人進步）的角度來說，我們應該找到更合適的方法來實現(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>
新聞熱點
疑難解答
圖片精選
