vue中v-slot插槽的几种使用方法

v-solt 分为3中插槽 分别是：

普通插槽，具名插槽，动态插槽

普通插槽：

在子组件中使用 占位,就可以在组件的标签中输入内容,放到插槽位置显示
eg：

    <div id="box">
        <aa>我是插槽添加的内容</aa>
    </div>
    <script>
        var bb=`
        <div>
            <slot></slot>
        </div>
        `
        Vue.component('aa',{
            template:bb
        })
        let vm=new Vue({
            el:'#box'

        })
    </script>

具名插槽 ：

<slot name='aa'></slot> 
//使用name属性给插槽命名
//使用<template v-slot:aa></template> 
//标签和v-slot指令来使用

eg：

<div id="box">
        <aa>
            <template v-slot:slot>
                我是具名插槽
            </template>
        </aa>
    </div>
    <script>
        var bb=`
        <div>
            <slot name='slot'></slot>
        </div>
        `
        Vue.component('aa',{
            template:bb
        })
        let vm=new Vue({
            el:'#box'

        })
    </script>

动态插槽：

<slot name='aa'></slot>
//使用name属性给插槽命名
//使用 <template v-slot:[变量]></template> 
//v-slot指令的值使用[]包裹起来,就可以解析里面的变量

eg：

   <div id="box">
        <aa>
            <template v-slot:[name]>
                我是具名插槽
            </template>
        </aa>
    </div>
    <script>
        var bb=`
        <div>
            <slot name='slot'></slot>
        </div>
        `
        Vue.component('aa',{
            template:bb
        })
        let vm=new Vue({
            el:'#box',
            data(){
                return{
                    name:"slot"
                }
            }
        })
    </script>