render函數之jsx應用

1、模板缺陷（模板的最大特色是擴展難度大，不易擴展。可能會形成邏輯冗餘）

<level :type="1">哈哈</level>

<level :type="2">呵呵</level>

<level :type="3">嘿嘿</level>

Level組件須要對不一樣的type產生不一樣的標籤

<template>

　　<h1 v-if="type==1">

　　　　<slot></slot>

　　</h1>

　　<h2 v-else-if="type==2">

　　　　<slot></slot>

　　</h2>

　　<h3 v-else-if="type==3">

　　　　<slot></slot>

　　</h3>

</template>

<script>

　export default {

　　　　props:{

　　　　　　type:{

　　　　　　　　type:Number

　　　　　　}

　　　　}

　　}

</script>

 

2、函數式組件

函數式組件沒有模板，只容許提供render函數

<script>

export default {

　　render(h){

　　　　return h('h'+this.type,{},this.$slots.default);

　　},

　　props:{

　　　　type:{

　　　　　　type:Number

　　　　}

　　}

}

</script>

 

3、JSX應用

使用jsx會讓代碼看起來更加簡潔易於讀取

<script>

export default {

　　render(h){

　　　　const tag = 'h' + this.type;

　　　　return <tag>{this.$slots.default}</tag>;

　　},

　　props:{

　　　　type:{

　　　　　　type:Number

　　　　}

　　}

}

</script>

 

4、render方法定製組件

編寫list組件能夠根據用戶傳入的數據自動循環列表

<List :data="data"></List>

<script>

import List from './components/List'

export default {

　　data(){

　　　　return {

　　　　　　data:["蘋果","香蕉","橘子"]

　　　　};

　　},

　　components:{

　　　　List

　　}

}

</script>

<!-- List組件渲染列表 -->

<template>

　　<div class="list">

　　　　<div v-for="(item,index) in data" :key="index">

　　　　　　<li>{{item}}</li>

　　　　</div>

　　</div>

</template>

<script>

export default {

　　props:{

　　　　data:Array,

　　　　default:()=>[]

　　}

}

</script>

經過render方法來定製組件

一、在父組件中傳入render方法

<List :data="data" :render="render"></List>

<script>

export default {

　　render(h,name){

　　　　return <span>{name}</span>

　　},

　　data(){

　　　　return{

　　　　　　data:['西瓜','草莓','桃子']

　　　　}

　　}

}

</script>

咱們須要createElement方法，就會想到能夠編寫某個函數組件，

將createElement方法傳遞出來

二、子組件接受方法傳遞給函數組件

<template>

　　<div class="list">

　　　　<template v-for="(item,index) in data" :key="index">

　　　　　　<li v-if="!render">{{item}}</li>

　　　　　　<ListItem v-else :item="item" :render="render"></ListItem>

　　　　</template>

　　</div>

</template>

 

<script>

import ListItem form './ListItem'

export default {

　　conponents:{

　　　　ListItem

　　},

　　props:{

　　　　data:{

　　　　　　type:Array,

　　　　　　default:()=>[]

　　　　},

　　render:{

　　　　　　type:Function

　　　}

　　}

}

</script>

 

三、函數式組件

//ListItem.vue調用最外層render方法,將createElement方法傳遞出來

export default {

　　render(h){

　　　　this.render(h,this.item)

　　},

　　props:{

　　item:{

　　　　type:Function

　　},

　　render:{

　　　　type:Function

　　}

　}

}

5、scope-slot

//使用v-slot可將子組件內部綁定在slot插槽上的值傳遞到父組件上使用：（原理：在子組件內部編譯調用，因此能夠調用到。）

<List>

<template v-slot="{item,index}">

　　{{item}}

</template>

<List>

 

<div v-for="(item,index) in data" :key="index">

　　<slot :item="item" :index="index"></slot>

</div>