vue 2.6之前和之后的三种插槽

默认插槽

//子
<div>
  <slot></slot>
</div>
//父
<com>
       <p>我是插槽内容</p>
</com>

具名插槽
2.6之后

//子
<div>
     <slot></slot>
     <slot   name="s1"></slot>
</div>
//父
<com>
     <template></template  v-slot:default>
     <template></template  v-slot:s1>
</com>

2.6之前

  父级
      <child>                
            <p slot="s1">xxxx</p>                
            <p slot="s2">xxxx</p>          
       <child>            
  子级           
    complate:`           
     <div>               
            <slot name="s1"></slot>                
            <slot name="s2"></slot>            
     </div>

作用域插槽
2.6之前

父级
               <child>                   
                        <template slot-scope='res'>                     
                                  <p>{
     {
     res.msg}}</p>                  
                          </template>               
                <child>           
// 子级               
                 <div>                   
                       <slot :msg='msg'></slot>             
                  </div>

2.6之后

//子
<div>
       <slot :msg="msg"></slot>
</div>
//父
<com>
    //错误写法
    <p v-slot:default="ctx">  {
     {
       ctx.msg }} </p>
     //正确写法
      <template  v-slot:default="ctx">
             <p>  {
     {
      ctx.msg }} </p>
     </template>
</com>

2.6之后 v-slot: 只能绑定在template或者component上。可以简写成#。