一、模板缺陷(模板的最大特点是扩展难度大,不易扩展。可能会造成逻辑冗余)
<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>

render函数之jsx应用的更多相关文章

  1. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  2. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  3. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  4. Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...

  5. Vue之render渲染函数和JSX的应用

    一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...

  6. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

  7. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  8. Vue躬行记(7)——渲染函数和JSX

    除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...

  9. QTableView另类打印解决方案(复用render函数去解决print问题)

    Qt QTableView另类打印解决方案     上回书说道Qt的model/view,我就做了个demo用于显示数据库中的内容.没想到tableview的打印竟然成了问题.我困惑了,难道Qt不应该 ...

随机推荐

  1. sed取某域名对应的IP

  2. Content-type"是"application/json的作用

    request中发送json数据用post方式发送Content-type用application/json;charset=utf-8方式发送的话,直接用springMVC的@RequestBody ...

  3. charles 4.2.1 Ubuntu破解版安装

    charles 4.2.1 Ubuntu破解版安装 下载 charles-proxy-4.2.1_amd64.tar.gz 破解版 charles.jar 破解包 解压 sudo tar -zxvf ...

  4. 【转帖】为什么有了Compose和Swarm,还会有Kubernetes的出现?

    为什么有了Compose和Swarm,还会有Kubernetes的出现? https://www.cnblogs.com/chenqionghe/p/11474486.html 图非常好 一.k8s设 ...

  5. Python之路【第三十篇】:django 模型层-多表关系

    多表操作 文件为 ---->  orm2 数据库表关系之关联字段与外键约束 一对多Book id title price publish email addr 1 php 100 人民出版社 1 ...

  6. Python之路【第二十一篇】:JS基础

    JavaScript的基础学习(一) 一.JavaScript概述 1.1 JavaScript的历史 ● 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在 ...

  7. LInux基础(04)项目设计一(理解链表管理协议的代码架构)

    要设计好一个项目必须要有一个健全的代码框架 一个结构体内有数据域和处理数据的函数指针, 先实现管理链表的函数 增加节点  删除节点  清空链表  遍历节点对每个节点进行操作 再实现协议的注册 把对象s ...

  8. 【实战经验】--Xilinx--Chipscope使用

    1)在工程右键点击New Source 新建Chioscope,在File name 填写名称: 2)新建完成后,工程里会出现你建立的chipscope文件(如下图chip_ddr3.cdc)双击打开 ...

  9. Docker登录容器命令

    1. docker exec -i -t 13496e7d5830(容器名) /bin/sh 2.退出容器命令 exit

  10. LOJ2401 JOISC2017 Dragon2 计算几何、线段树

    传送门 先考虑每一个攻击方的龙和被攻击方的龙可以与多少个被攻击方/攻击方的龙匹配. 对于攻击方的龙\(A\)和被攻击方的龙\(B\),在道路为线段\((C,D)\)的情况下,能够与下图位置的所有对应属 ...