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. Qt 图像处理之 灰度变换

    对图像的亮度.对照度进行变换是非经常常使用的一种图像处理操作,可是Qt 本身却没有提供对应的功能代码.因此我写了个简单的类来实现这些操作.我把这个类称为 BrightnessMapper. 代码例如以 ...

  2. tensorflow利用预训练模型进行目标检测（一）：安装tensorflow detection api

    一.tensorflow安装 首先系统中已经安装了两个版本的tensorflow,一个是通过keras安装的, 一个是按照官网教程https://www.tensorflow.org/install/ ...

  3. 【POJ 2482】 Stars in Your Windows

    [题目链接] http://poj.org/problem?id=2482 [算法] 线段树 + 扫描线 [代码] #include <algorithm> #include <bi ...

  4. BZOJ 3729 splay维护DFS序+博弈论

    思路: 这像是 阶梯Nim之类的东西 我们 直接把sg函数 设成mod(L+1)的 一棵子树 向下的奇数层上的石子xor起来 就是答案 有加点和改值的操作 就splay维护一下 //By Sirius ...

  5. Python学习小计

    1.初学Python最好选择2.7版本,因为大部分Python书籍的示例代码是基于这个版本的 2.Python安装可以参考百度经验完成 如果在电脑上同时安装2个版本,则CMD启动时只需要: py -2 ...

  6. 将查询到的数据导出到Excel终结版

    吐槽 最近新项目需要用到导出数据到Excel,试了试之前写的一篇博文,但是感觉那个不太好,主要原因是没能实现样式控制,今天我们就来介绍一种新的导出Excel方法,而且这种方法很轻量级,它利用xml生成 ...

  7. JavaScript系列--浅析原型链与继承

    一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ...

  8. 清北集训Day1T3 LYK loves jumping(期望DP)

    题目描述 LYK在玩一个魔法游戏,叫做跳跃魔法. 有n个点,每个点有两个属性hi和ti,表示初始高度,和下降高度.也就是说,它初始时高度为hi,一旦LYK踩在这个点上,由于重力的影响,这个点的高度会下 ...

  9. Win10 build package error collections

    1. 打包Released的时候出现问题意思是说 本地项目,类里有这个Visibility属性不能进行序列化 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 error CS0029: 无法将 ...

  10. addEventListener()与removeEventListener(),追加事件和删除追加事件

    addEventListener()与removeEventListener()用于追加事件和删除追加.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函 ...