一般情況下忧饭，在vue中扛伍，我們定義組件時(shí)，都使用template（模板）來創(chuàng)建HTML词裤，但如果我們的HTML需要使用javaScript來生成的話刺洒，應(yīng)該怎么辦?
1鳖宾、render函數(shù)的使用意義
渲染節(jié)點(diǎn)
2、示例
官方文檔給我們提供了一個(gè)很好理解的例子：
我們需要?jiǎng)?chuàng)建一個(gè)這樣的組件：
<anchored-heading :level="1">Hello world!</anchored-heading>
當(dāng)level傳入1時(shí)逆航，渲染出來的html內(nèi)容就是<h1>Hello world</h1>，傳入2時(shí)因俐，渲染出來的html內(nèi)容就是<h2>Hello world</h2>……
很明顯我們想渲染的節(jié)點(diǎn)標(biāo)簽不是寫死在模板里的拇惋。
使用render來實(shí)現(xiàn)該組件：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 標(biāo)簽名稱
this.$slots.default // 由子節(jié)點(diǎn)構(gòu)成的數(shù)組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
render是一個(gè)渲染函數(shù)，返回值是DOM節(jié)點(diǎn)抹剩。
示例代碼第三行：我們?cè)赾reateElement()這個(gè)函數(shù)里傳了兩個(gè)參數(shù)撑帖，第一個(gè)參數(shù)是節(jié)點(diǎn)名稱，跟this.level掛鉤吧兔，this.level是1磷仰，節(jié)點(diǎn)名稱就是<h1>，是2節(jié)點(diǎn)名稱就是<h2>境蔼，第二個(gè)參數(shù)是節(jié)點(diǎn)下的子節(jié)點(diǎn)灶平，$slots.defult的含義可查詢官網(wǎng)api中的實(shí)例屬性： https://vuefe.cn/v2/api/#vm-slots，它得到的是所有沒有被包含在具名slot中的節(jié)點(diǎn)箍土。由此render函數(shù)渲染出新節(jié)點(diǎn)逢享。
附createElement函數(shù)的定義：
// @returns {VNode}
createElement(
//第一個(gè)參數(shù)： {String | Object | Function}.（必填項(xiàng)）
// 一個(gè) HTML 標(biāo)簽，組件設(shè)置吴藻，或一個(gè)函數(shù)
// 必須 Return 上述其中一個(gè)瞒爬，例如"div"
// 第二個(gè)參數(shù)：{Object}
// 一個(gè)對(duì)應(yīng)屬性的數(shù)據(jù)對(duì)象.（可選項(xiàng)）
//例如，樣式屬性：{style: {color: 'red',fontSize: '20px'}}
//第三個(gè)參數(shù)： {String | Array}
// 子節(jié)點(diǎn)(VNodes).（可選項(xiàng)）
//例如：
// [
// createElement('h1', 'hello world'),
//"<p>哈哈哈</p>"
//]
//這里我們可以傳入數(shù)組沟堡，也可以直接傳入一段節(jié)點(diǎn)中的文本內(nèi)容（String）侧但，實(shí)際上節(jié)點(diǎn)內(nèi)的文本內(nèi)容也屬于它的子節(jié)點(diǎn)。
在render函數(shù)中我們可以直接使用原生js來實(shí)現(xiàn)v-if航罗、v-for等指令禀横。
