render函数之jsx应用

一、模板缺陷（模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余）

<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>

 

二、函数式组件

函数式组件没有模板，只允许提供render函数

<script>

export default {

　　render(h){

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

　　},

　　props:{

　　　　type:{

　　　　　　type:Number

　　　　}

　　}

}

</script>

 

三、JSX应用

使用jsx会让代码看起来更加简洁易于读取

<script>

export default {

　　render(h){

　　　　const tag = 'h' + this.type;

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

　　},

　　props:{

　　　　type:{

　　　　　　type:Number

　　　　}

　　}

}

</script>

 

四、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方法来定制组件

1、在父组件中传入render方法

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

<script>

export default {

　　render(h,name){

　　　　return <span>{name}</span>

　　},

　　data(){

　　　　return{

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

　　　　}

　　}

}

</script>

我们需要createElement方法，就会想到可以编写某个函数组件，

将createElement方法传递出来

2、子组件接受方法传递给函数组件

<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>

3、函数式组件

//ListItem.vue调用最外层render方法,将createElement方法传递出来

export default {

　　render(h){

　　　　this.render(h,this.item)

　　},

　　props:{

　　item:{

　　　　type:Function

　　},

　　render:{

　　　　type:Function

　　}

　}

}

五、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>