這篇文章主要介紹了vue渲染函數render的使用,小編覺得還挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
1.什麼是render函數?
vue透過 template 來建立你的 HTML。但是,在特殊情況下,這種寫死的模式無法滿足需求,必須需要js的程式設計能力。此時,需要用render來建立HTML。
例如如下我想要實作如下html:
<p id="container"> <h1> <a href="#" rel="external nofollow" rel="external nofollow" > Hello world! </a> </h1> </p>
我們會如下使用:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> </style> </head> <body> <p id="container"> <tb-heading :level="1"> <a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a> </tb-heading> </p> </body> <script src="./vue.js"></script> <script type="text/x-template" id="templateId"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> </script> <script> Vue.component('tb-heading', { template: '#templateId', props: { level: { type: Number, required: true } } }); new Vue({ el: '#container' }); </script> </html>
2.範例:
##遇到的問題:在工作中,我創建了一個button元件,又創建了一個button-group元件button元件較為簡單,就是一個可以輸入type/size/icon等屬性的button 此為渲染後結果。 然後,建立button-group元件,目標結果為 此處,不僅要在最外層包裹一層p,還要在每個button組件外層包裹一層p標籤。此處,就需要使用render函數了。 既然有了render函數,就不再需要template標籤了,vue檔案中只需要script標籤(該元件style是全域的)button-group.vue如下
<script> export default { name: "XButtonGroup", props: { compact: { //自定义的button-group属性,影响其classname type: Boolean, default: true } }, render(createElement) { //此处创建element }, computed: { groupClass() { const className = ["field"]; //通过计算属性监听compact属性传入className className.push(this.compact ? "has-addons" : "is-grouped"); return className; } } }; </script>接下來就要看render函數了。 render函數中的createElement方法有三個參數。第一個參數為外層標籤名,第二個為外層標籤的屬性對象,第三個為外層標籤中的內容所以第一步
render(createElement) { return createElement( 'p', { class: this.groupClass }, '内容', ) }渲染結果: 那怎麼會在外層p中渲染button元件呢? render函數的第三個參數除了字串,還可以傳入VNode的陣列。 VNode就是vue中的節點。 此處,我們透過this.$slots.default取得所有插入到button-group元件內預設slot的button節點
render(createElement) { return createElement( 'p', { class: this.groupClass }, this.$slots.default, ) },渲染結果: #button已經正確渲染到了外層p。但是怎麼在每個button外層包裹一層元素呢。 createElement會建立新的VNode,而render函數第三個參數需要VNode數組,所以我們需要傳入一個由createElement回傳值所組成的陣列。
render(createElement) { //遍历每一个VNode,用createElement函数在外层包裹class为control的p标签,组成新的VNode数组 const arry = this.$slots.default.map(VNode => { return createElement('p', { class: 'control' }, [VNode]) }) return createElement( 'p', { class: this.groupClass }, arry, ) },渲染結果: 並且根據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>上面是我整理給大家的,希望今後會對大家有幫助。 相關文章:
以上是在vue中如何渲染函數render(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!