vue具名插槽与作用域插槽

一、具名插槽

如何使用具名插槽：

    app.component('my-compontent',{
        data(){
            return {}
        },
        template:`
            <div>
                <span>我的插槽</span>
                <slot name='mySlot'></slot> 
            </div>
        `
    })
    
    
    <my-compontent>
        <template v-slot:mySlot>
            <span>这里就是我的具名插槽插入的内容</span>
        </template>
    </my-compontent>
    

二、 什么是作用域插槽

简单的来说，因为父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。所以父级作用域中是拿不到子作用域中的内容的。所以如果你想在当前组件当中拿到插槽里面的值，这时候使用作用域插槽就行了！

    //代码附上
    app.component('my-compontent',{
        data(){
            return {
                data:'插槽里面的值'
            }
        },
        template:`
            <div>
                <span>我的插槽</span>
                <slot name='mySlot' :data='data'></slot> 
            </div>
        `
    })
      
      //默认使用方式 
      <my-compontent>
        <template v-slot:mySlot="slotProps">
            <span>{{slotprops.data}}这里就是从插槽里面拿出来的值</span>
        </template>
     </my-compontent>
    
    //解构使用方式使用ES2015来解构
    <my-compontent>
        <template v-slot:mySlot="{{data}}">
            <span>{{data}}这里就是从插槽里面拿出来的值</span>
        </template>
    </my-compontent>
   
   
   //重命名插槽的prop
    <my-compontent>
        <template v-slot:mySlot="{data:myData}">
            <span>{{myData}}这里就是从插槽里面拿出来的值</span>
        </template>
    </my-compontent>
    
  //给插槽的prop默认值
    <my-compontent>
        <template v-slot:mySlot="{data='data123'}">
            <span>{{data}}这里就是从插槽里面拿出来的值</span>
        </template>
    </my-compontent>

**注意：在my-compontent里面的attribute（属性）被称为插槽的prop即是my-compontent里面的data。my-compontent里面的attribute是可以添加多个的**