vue中的reader函數(shù)和template一樣都是創(chuàng)建html模板的撩穿，有的時候模板中根據(jù)不同情況渲染不同模板時歧斟，使用template就顯得代碼冗長繁瑣而且有大量重復鹊奖，如：
這里通過傳入level值來顯示不同的dom,可以實現(xiàn)只是代碼太長了
通過reader函數(shù)渲染如下：
reader函數(shù)通過props傳過來的level值用createElement（vue中有時用h代替长窄，就是俗稱的h函數(shù)）直接創(chuàng)建dom元素按厘，這樣就省了一些判斷
createElement參數(shù)：
一般有三個參數(shù)：1.標簽(div)液走，2. 標簽上的屬性碳默，3.子節(jié)點
一個簡單的實例：
map.vue組件
<script>
import?zoneMap?from?'./zoneMap.vue'
export?default{
????functional:true,
????name:?'map',
????props:?{
????????mapAddress:?{
????????????type:?String
????????}
????},
????render(h,?{props,?data})?{
????????var?a?=?h(zoneMap,{attrs:{
????????????mapAddress:?props.mapAddress
????????}})
????????return?h('div',{attrs:{
????????????class:?'mr-5',
????????????style:?'width:100%;height:100%'
????????}},?[a])
????}
}
</script>
index.vue組件引用map組件并傳入?yún)?shù)：
<div class='map'>
?<map?:mapAddress="mapAddress"></map>
</div>
zoneMap.vue組件：
<template>
??<div?class="map-s">
??????<div>{{mapAddress}}</div>
??</div>
</template>
export?default?{
??name:?'zoneMap',
??props:?['mapAddress'],
??data()?{
????return?{
????}
??},
}
主要的一個流程是：index.vue組件引入了map.vue? ?-->? ?map.vue自己創(chuàng)建了一個div標簽并引入了zoneMap.vue? ? -->? ?zoneMap渲染傳過來的props數(shù)據(jù)
最后顯示：
注意：用reader函數(shù)的時候文件中不能在使用template模板
functional:true這個必須要(表示該組件是純函數(shù)組件，會進行檢查缘眶，只能用 props 而不能使用組件內部的 state)
