溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何在vue中使用render渲染函數，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1.什么是render函數？
vue通過 template 來創建你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時，需要用render來創建HTML。
比如如下我想要實現如下html：
<div id="container"> <h2> <a href="#" rel="external nofollow" rel="external nofollow" > Hello world! </a> </h2> </div>
我們會如下使用：
<!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.例：
遇到的問題：
在工作中，我創建了一個button組件，又創建了一個button-group組件
button組件較為簡單，就是一個可以輸入type/size/icon等屬性的button
此為渲染后結果。
然后，創建button-group組件，目標結果為
此處，不僅要在最外層包裹一層div，還要在每個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(
'div', {
class: this.groupClass
}, '內容',
)
}渲染結果：
那怎樣在外層div中渲染button組件呢？
render函數的第三個參數除了字符串，還可以傳入VNode的數組。VNode就是vue中的節點。
此處，我們通過this.$slots.default獲取所有插入到button-group組件內默認slot的button節點
render(createElement) {
return createElement(
'div', {
class: this.groupClass
}, this.$slots.default,
)
},渲染結果：
button已經正確渲染到了外層div中。但是怎么在每個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(
'div', {
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渲染函數就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
