插槽的用法，具名插槽，插槽作用域

一、普通的插槽用法：在模板中使用slot，在父组件中直接写入要传入的值。

例如：

<div id="app">
        <mycomponent>
            哈哈哈，我是插槽
        </mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <slot></slot>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                mycomponent:{
                    template:'#mytemplate'
                }
            }
        })
    </script>

二、具名插槽的用法，当有多个slot的时候，这时候可以使用具名插槽避免默认插槽覆盖。

例如:

<div id="app">
        <mycomponent>
            <template v-slot:header>
                <div>
                    具名插槽1
                </div>
            </template>
            <template v-slot:content>
                <div>
                    具名插槽2
                </div>
            </template>
            <template v-slot:footer>
                <div>
                    具名插槽3
                </div>
            </template>
        </mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <slot name='header'>A</slot>
            <slot name='content'>B</slot>
            <slot name='footer'>C</slot>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                mycomponent:{
                    template:'#mytemplate'
                }
            }
        })
    </script>

 三，作用域插槽，在需要获取子组件中的data或者其他值来放入父组件时，可以使用此方法。

在子组件的模板中，加入

<slot name='header' :data='message'></slot>

这里的data是自己绑定的标签名，而这里的message表示的是需要传递的data中值，特就是data指向message（当然这里也可以不一定要写data里面的值，可以写其他的...字符串，对象，数组等等）。

<mycomponent>
            <template v-slot:header='data'>
                <div>
                    {{data.data}}
                </div>
            </template>
</mycomponent>

在父组件中引用mycomponent（子组件），想要在父组件中得到上面传过来的message，需要用到v-slot:插槽名='传递过来的标签(也就是上面的data)',还有一点必须提醒一下，这里的组件内必须使用template，不能使用其他的div等等，跟默认的插槽有所不同。

这里附上完整的代码片段(作用域插槽)：

<div id="app">
        <mycomponent>
            <template v-slot:header='data'>
                <div>
                    {{data.data}}
                </div>
            </template>
        </mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <slot></slot>
            <slot name='header' :data='message'></slot>
            <slot name='content'>B</slot>
            <slot name='footer'>C</slot>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                mycomponent:{
                    template:'#mytemplate',
                    data() {
                        return {
                            message:'插槽作用域'
                        }
                    },
                }
            }
        })
    </script>

 如果有不对的地方欢迎指正哦，相互学习相互进步才是最终目标呀！