VUE3 之 render 函數的使用 – 這個系列的教程通俗易懂，適合新手
1. 概述
老話說的好：不用想的太多、太遠，做好當天的事，知道明天要做什麼就可以了。
言歸正傳，今天我們來聊聊 VUE 中 render 函數的使用。
2. render 函數
2.1 一個簡單的例子
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
template:`
<my-h>
追風人
</my-h>
`
});
app.component('my-h', {
template:`
<h1>
<slot />
</h1>
`
});
const vm = app.mount("#myDiv");
</script>
這個例子中，我們用到了之前學的 子組件 和 插槽，實現了對主組件中的文字加 h 標籤的功能。
2.2 依據數據，改變 h 標籤
const app = Vue.createApp({ data() { return { myLevel: 2 } }, template:` <my-h :level="myLevel"> 追風人 </my-h> ` }); app.component('my-h', { props: ['level'], template:` <h1 v-if="level===1"> <slot /> </h1> <h2 v-if="level===2"> <slot /> </h2> ` });
這個例子中，我們希望依據數據 myLevel 的值，改變主組件中文字的 h 標籤，1 對應 h1，2 對應 h2。
2.3 更多的 h 標籤
const app = Vue.createApp({ data() { return { myLevel: 3 } }, template:` <my-h :level="myLevel"> 追風人 </my-h> ` }); app.component('my-h', { props: ['level'], template:` <h1 v-if="level===1"> <slot /> </h1> <h2 v-if="level===2"> <slot /> </h2> <h3 v-if="level===3"> <slot /> </h3> <h4 v-if="level===4"> <slot /> </h4> <h5 v-if="level===5"> <slot /> </h5> ` });
我們希望可以有更多的 h 標籤供選擇，但顯然這麼寫，非常的不優雅。
2.4 使用 render 函數 簡化代碼
const app = Vue.createApp({ data() { return { myLevel: 6 } }, template:` <my-h :level="myLevel"> 追風人 </my-h> ` }); app.component('my-h', { props: ['level'], render() { const { h } = Vue; return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default()) } });
這個例子中，我們使用 render 函數 代替 template。
const { h } = Vue; 這句是固定寫法。
return h(‘h’ + this.level, {name:”myh”, id:”myh”}, this.$slots.default())
這句中，第一個參數 ‘h’ + this.level 是標籤，第二個參數 {name:”myh”, id:”myh”} 是標籤的屬性，第三個參數 this.$slots.default() 是標籤包裹的內容
生成的標籤結果如下：<h6 name=”myh” id=”myh”> 追風人 </h6>
2.5 render 函數包裹更多的內容
const app = Vue.createApp({ data() { return { myLevel: 1 } }, template:` <my-h :level="myLevel"> 追風人 </my-h> ` }); app.component('my-h', { props: ['level'], render() { const { h } = Vue; return h('h' + this.level, {name:"myh", id:"myh"}, [ this.$slots.default(), h('br', {}), h('button', {onclick:"alert(123)"}, '按鈕') ]) } });
render 函數中 h 函數的第三個參數，可以是數組，例如上面的例子，生成的結果如下：
<h1 name=”myh” id=”myh”> 追風人 <br><button onclick=”alert(123)”>按鈕</button></h1>
3. 綜述
今天聊了一下 VUE 中 render 函數的使用，希望可以對大家的工作有所幫助，下一節我們繼續講 Vue 中的高級語法，敬請期待
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，這裡乾貨滿滿，都是實戰類技術文章，通俗易懂，輕鬆上手。
4. 個人公眾號
微信搜索公眾號：追風人聊Java，歡迎大家關注
