• vue Render scopedSlots

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

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

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

    [html] view plain copy
     
    1. <body>  
    2.     <div class="" id="app">  
    3.     <myslot>  
    4.         <div>this is slot</div>  
    5.     </myslot>  
    6.   
    7.   
    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.$slots.default])  
    14.             }  
    15.     });  
    16.     var app=new Vue({  
    17.         el:'#app'  
    18.     })  
    19.     </script>  
    20.     </body>   

    多个slot的使用

    [html] view plain copy
     
    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.   
    8.   
    9.     </div>  
    10.     <script>  
    11.     Vue.component('myslot',{  
    12.         render:function(createElement){  
    13.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
    14.             return createElement('div',[he,this.$slots.name2,this.$slots.name1])  
    15.             }  
    16.     });  
    17.     var app=new Vue({  
    18.         el:'#app'  
    19.     })  
    20.     </script>  
    21.     </body>  


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

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

    [html] view plain copy
     
    1. <body>  
    2.     <div class="" id="app">  
    3.     <myslot>  
    4.         <template scope="props">  
    5.             <div>{{props.text}}</div>  
    6.         </template>  
    7.   
    8.     </myslot>  
    9.   
    10.   
    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',[he,this.$scopedSlots.default({  
    17.                 text:'hello scope'  
    18.             })])  
    19.             }  
    20.     });  
    21.     var app=new Vue({  
    22.         el:'#app'  
    23.     })  
    24.     </script>  
    25.     </body>  



    多个$scopedSlot的使用

    [html] view plain copy
     
      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.   
      11.     </myslot>  
      12.   
      13.   
      14.     </div>  
      15.     <script>  
      16.     Vue.component('myslot',{  
      17.         render:function(createElement){  
      18.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
      19.             return createElement('div',  
      20.                 [he,  
      21.                 this.$scopedSlots.name1({  
      22.                 text:'hello scope'  
      23.             }),  
      24.                 this.$scopedSlots.name2({  
      25.                 text:'$scopedSlots using'  
      26.             })])  
      27.             }  
      28.     });  
      29.     var app=new Vue({  
      30.         el:'#app'  
      31.     })  
      32.     </script>  
      33.     </body>  
  • 相关阅读:
    .NET + Jcrop 实现在线裁图功能
    jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
    A、B、C、D和E类IP地址
    linux内核源码阅读之facebook硬盘加速flashcache之四
    Help-IntelliJIDEA-2019.3.4-插件：插件下载，安装，重启idea
    Help-IntelliJIDEA-2019.3.4-基础设置：14. intellij idea怎么调整菜单栏字体大小
    Help-IntelliJIDEA-2019.3.4-基础设置：13. 统一设置编码
    Help-IntelliJIDEA-2019.3.4-基础设置：12. Intellij IDEA的代码提示功能
    Help-IntelliJIDEA-2019.3.4-基础设置：11. idea 自动补全返回值，自动补全变量名称和属性名称
    Help-IntelliJIDEA-2019.3.4-基础设置：10.Maven自动下载源码包，告别反编译，直接上源码注释
  • 原文地址：https://www.cnblogs.com/yaowen/p/7111757.html
Copyright © 2020-2023  润新知