render 中 slot 的一般默认使用方式如下：

this.$slots.default 对用 template的<slot>的使用没有name 。

想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <div>this is slot</div>
  5. </myslot>
  6. </div>
  7. <script>
  8. Vue.component('myslot',{
  9. render:function(createElement){
  10. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  11. return createElement('div',[he,this.$slots.default])
  12. }
  13. });
  14. var app=new Vue({
  15. el:'#app'
  16. })
  17. </script>
  18. </body>

多个slot的使用

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <div slot="name1">this is slot</div>
  5. <div slot="name2">The position is slot2 </div>
  6. </myslot>
  7. </div>
  8. <script>
  9. Vue.component('myslot',{
  10. render:function(createElement){
  11. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  12. return createElement('div',[he,this.$slots.name2,this.$slots.name1])
  13. }
  14. });
  15. var app=new Vue({
  16. el:'#app'
  17. })
  18. </script>
  19. </body>

在vue2.1.0新添加了scope(虽然感觉有点怪，但是用习惯了，还蛮好用的)

同样给出一般使用和多个使用示例，

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <template scope="props">
  5. <div>{{props.text}}</div>
  6. </template>
  7. </myslot>
  8. </div>
  9. <script>
  10. Vue.component('myslot',{
  11. render:function(createElement){
  12. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  13. return createElement('div',[he,this.$scopedSlots.default({
  14. text:'hello scope'
  15. })])
  16. }
  17. });
  18. var app=new Vue({
  19. el:'#app'
  20. })
  21. </script>
  22. </body>

多个$scopedSlot的使用

    1. <body>
    2. <div class="" id="app">
    3. <myslot>
    4. <template slot="name2" scope="props">
    5. <div>{{props.text}}</div>
    6. </template>
    7. <template slot="name1" scope="props">
    8. <span>{{props.text}}</span>
    9. </template>
    10. </myslot>
    11. </div>
    12. <script>
    13. Vue.component('myslot',{
    14. render:function(createElement){
    15. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
    16. return createElement('div',
    17. [he,
    18. this.$scopedSlots.name1({
    19. text:'hello scope'
    20. }),
    21. this.$scopedSlots.name2({
    22. text:'$scopedSlots using'
    23. })])
    24. }
    25. });
    26. var app=new Vue({
    27. el:'#app'
    28. })
    29. </script>
    30. </body>

vue Render scopedSlots的更多相关文章

  1. vue render function

    vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...

  2. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  3. vue render里面的nativeOn

    vue render里面的nativeOn的解释官方的解释是:// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件. 官方的解释比较抽象 个人理解: 父组件要在子组 ...

  4. vue render function & dataset

    vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...

  5. vue render & array of components & vue for & vue-jsx

    vue render & array of components & vue for & vue-jsx https://www.cnblogs.com/xgqfrms/p/1 ...

  6. vue render html string

    vue render html string shit element ui render string array relativeShowConvert(data) { // log(`data` ...

  7. vue render函数

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

  8. vue render & JSX

    vue在绝大多数使用template是没问题的,但在某些场合下,使用render更适合. 一.render函数 1.createElement 参数 createElement 可接受三个参数 1){ ...

  9. vue render {} 对象 说明文档

    Vue学习笔记进阶篇——Render函数 http://www.mamicode.com/info-detail-1906336.html 深入data object参数 有一件事要注意:正如在模板语 ...

随机推荐

  1. MFC C++ 获取外网IP地址

    #include <afxinet.h> //GB2312 转换成 Unicode wchar_t* GB2312ToUnicode(const char* szGBString) { U ...

  2. poj--1383--Labyrinth(树的直径)

    Labyrinth Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 4062   Accepted: 1529 Descrip ...

  3. poj--2631--Roads in the North(树的直径 裸模板)

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2389   Accepted: 117 ...

  4. 如何版本化你的API？--转

    原文地址:http://www.infoq.com/cn/news/2017/09/How-versioning-API 如何版本化API需要考虑各种实际业务场景,但是一个完备的API应该是: 和客户 ...

  5. （转）硬盘结构，主引导记录MBR，硬盘分区表DPT，主分区、扩展分区和逻辑分区，电脑启动过程

    硬盘结构硬盘有很多盘片组成,每个盘片的每个面都有一个读写磁头.如果有N个盘片.就有2N个面,对应2N个磁头(Heads),从0.1.2开始编号.每个盘片的半径均为固定值R的同心圆再逻辑上形成了一个以电 ...

  6. JS中let和var的区别

    js中let和var定义变量的区别   let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781 ...

  7. django patch

    import datetime import pytz from django.apps import AppConfig from django.db.models.fields import Da ...

  8. No content type provided for validation of a content model---WebLogic问题

    一个web项目,复制到Weblogic domain下的autodeploy目录下,可是从BEA管理控制台中的Deployments下却找不到该项目,奇怪了,这个以前拷过来就可以用的啊?! 查看控制台 ...

  9. pythone 学习笔记（粗略）

    文档目录 概述 安装 基本语法 数据结构 4.1 数字和字符串类型 4.2 元祖 4.3 列表 4.4 字典 流程语句 5.1 分支结构 5.2 逻辑运算符(if) 5.3 循环 5.3.1 for ...

  10. Extjs win

    //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: " ...