zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    MongoDB zip 包安装注意事项及过程
    20个免费的React Admin仪表板模板
    React常用的5个UI框架
    create-react-app my-app出错
    查看Vue，React等框架的排名以及编程语言的排名
    flex流动布局中的单个子元素位置如何自定义
    小程序跳转页面后，动态刷新跳转页面
    table表格动态合并
    Windows 10 提权漏洞复现及武器化利用
    ISO：Fedora/Centos-6/7-LiveCD 利用iso文件 本地硬盘安装：方式1：Grub4Dos partnew模拟
  • 原文地址：https://www.cnblogs.com/yaowen/p/7111757.html
Copyright © 2011-2022 走看看