這篇文章將為大家詳細(xì)講解有關(guān)如何在vue中使用render渲染函數(shù),文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供卡若企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站制作、成都網(wǎng)站建設(shè)、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為卡若眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)的建站公司優(yōu)惠進(jìn)行中。
1.什么是render函數(shù)?
vue通過(guò) template 來(lái)創(chuàng)建你的 HTML。但是,在特殊情況下,這種寫(xiě)死的模式無(wú)法滿(mǎn)足需求,必須需要js的編程能力。此時(shí),需要用render來(lái)創(chuàng)建HTML。
比如如下我想要實(shí)現(xiàn)如下html:
<div id="container"> <h2> <a href="#" rel="external nofollow" rel="external nofollow" > Hello world! </a> </h2> </div>
我們會(huì)如下使用:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> </style> </head> <body> <div id="container"> <tb-heading :level="1"> <a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a> </tb-heading> </div> </body> <script src="./vue.js"></script> <script type="text/x-template" id="templateId"> <h2 v-if="level === 1"> <slot></slot> </h2> <h3 v-else-if="level === 2"> <slot></slot> </h3> </script> <script> Vue.component('tb-heading', { template: '#templateId', props: { level: { type: Number, required: true } } }); new Vue({ el: '#container' }); </script> </html>
2.例:
遇到的問(wèn)題:
在工作中,我創(chuàng)建了一個(gè)button組件,又創(chuàng)建了一個(gè)button-group組件
button組件較為簡(jiǎn)單,就是一個(gè)可以輸入type/size/icon等屬性的button
此為渲染后結(jié)果。
然后,創(chuàng)建button-group組件,目標(biāo)結(jié)果為
此處,不僅要在最外層包裹一層div,還要在每個(gè)button組件外層包裹一層p標(biāo)簽。此處,就需要使用render函數(shù)了。
既然有了render函數(shù),就不再需要template標(biāo)簽了,vue文件中只需要script標(biāo)簽(該組件style是全局的)
button-group.vue如下
<script> export default { name: "XButtonGroup", props: { compact: { //自定義的button-group屬性,影響其classname type: Boolean, default: true } }, render(createElement) { //此處創(chuàng)建element }, computed: { groupClass() { const className = ["field"]; //通過(guò)計(jì)算屬性監(jiān)聽(tīng)compact屬性傳入className className.push(this.compact ? "has-addons" : "is-grouped"); return className; } } }; </script>
接下來(lái)就要看render函數(shù)了。
render函數(shù)中的createElement方法有三個(gè)參數(shù)。第一個(gè)參數(shù)為外層標(biāo)簽名,第二個(gè)為外層標(biāo)簽的屬性對(duì)象,第三個(gè)為外層標(biāo)簽中的內(nèi)容
所以第一步
render(createElement) { return createElement( 'div', { class: this.groupClass }, '內(nèi)容', ) }
渲染結(jié)果:
那怎樣在外層div中渲染button組件呢?
render函數(shù)的第三個(gè)參數(shù)除了字符串,還可以傳入VNode的數(shù)組。VNode就是vue中的節(jié)點(diǎn)。
此處,我們通過(guò)this.$slots.default獲取所有插入到button-group組件內(nèi)默認(rèn)slot的button節(jié)點(diǎn)
render(createElement) { return createElement( 'div', { class: this.groupClass }, this.$slots.default, ) },
渲染結(jié)果:
button已經(jīng)正確渲染到了外層div中。但是怎么在每個(gè)button外層包裹一層元素呢。createElement會(huì)創(chuàng)建新的VNode,而render函數(shù)第三個(gè)參數(shù)需要VNode數(shù)組,所以我們需要傳入一個(gè)由createElement返回值組成的數(shù)組。
render(createElement) { //遍歷每一個(gè)VNode,用createElement函數(shù)在外層包裹c(diǎn)lass為control的p標(biāo)簽,組成新的VNode數(shù)組 const arry = this.$slots.default.map(VNode => { return createElement('p', { class: 'control' }, [VNode]) }) return createElement( 'div', { class: this.groupClass }, arry, ) },
渲染結(jié)果:
并且根據(jù)button-group的compact屬性可以切換不同的class,生成不同的效果
<x-button-group :compact="true"> <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button> </x-button-group> <x-button-group :compact="false"> <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button> </x-button-group>
關(guān)于如何在vue中使用render渲染函數(shù)就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
當(dāng)前名稱(chēng):如何在vue中使用render渲染函數(shù)
瀏覽地址:http://bm7419.com/article4/gijcie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)