Example code for the use of slots in vue Render

This article introduces the example code for the use of slots in vue Render. If you need to know the usage of slots in vue Render, please refer to it. Hope this article will be helpful to you.

The general default usage of slot in render is as follows:

This.$ has no name for the use of <slot> with template.

If you want to use multiple slots. The slot needs to be named uniquely. Use this.$ to add multiple slots in render.

<body> 
  <div class="" > 
  <myslot> 
    <div>this is slot</div> 
  </myslot> 
 
 
  </div> 
  <script> 
  ('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

Use of multiple slots

<body> 
  <div class="" > 
  <myslot> 
    <div slot="name1">this is slot</div> 
    <div slot="name2">The position is slot2 </div> 
  </myslot> 
 
 
  </div> 
  <script> 
  ('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$slots.name2,this.$slots.name1]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

Scope has been added to vue2.1.0 (although it feels a bit weird, but I am used to it, and it is quite useful). Also given general use and multiple usage examples,

<body> 
  <div class="" > 
  <myslot> 
    <template scope="props"> 
      <div>{{}}</div> 
    </template> 
 
  </myslot> 
 
 
  </div> 
  <script> 
  ('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$({ 
        text:'hello scope' 
      })]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

Use of multiple $scopedSlots

<body> 
  <div class="" > 
  <myslot> 
    <template slot="name2" scope="props"> 
      <div>{{}}</div> 
    </template> 
    <template slot="name1" scope="props"> 
      <span>{{}}</span> 
    </template> 
 
  </myslot> 
 
 
  </div> 
  <script> 
  ('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div', 
        [he, 
        this.$scopedSlots.name1({ 
        text:'hello scope' 
      }), 
        this.$scopedSlots.name2({ 
        text:'$scopedSlots using' 
      })]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.