插槽怎么使用？分哪几种类型？

• 匿名插槽

//组件调用时写成双标签，类似于react中的children <HelloWorld msg="666" > <div>我是丰富的内容</div> </HelloWorld>

在组件内部放置一个slot标签占位，将来双标签中的内容就放置到这里

<template>

        <div class="hello">

                hello 插槽!

                {{msg}}

                <slot></slot>

        </div>

</template>

• 具名插槽

定义时：

<div class="container">

        <header>

                <slot name="header"></slot>

        </header>

        <main>

                <slot></slot>

        </main>

        <footer>

                <slot name="footer"></slot>

        </footer>

</div>

<HelloWorld msg="666" >

        <template v-slot:header>

                <div >我是丰富的内容</div>

        </template>

        <template v-slot:footer>

                <div>我想显示到hello之下</div>

        </template>

</HelloWorld>

• 作用域插槽

定义时：

<template>

        <div class="hello">

                <!-- <slot name="header"></slot> -->

                hello 插槽!

                {{msg}}

                <!-- <slot name="footer"></slot> -->

                <span>

                        <slot v-bind:user="userInfo">

                        </slot>

                </span>

        </div>

</template>

<script>

export default {

        name: 'HelloWorld',

        data(){

                return {

                        userInfo:{

                        lastName:'wenqiang',

                        firstName:'guo'

                }

        }

},

      props: {

                msg: String

        }

}

</script>

<HelloWorld msg="666" >

        <template v-slot:default="parentPropNames">

                {{ parentPropNames.user.firstName }}-{{parentPropNames.user.lastName}}

        </template>

</HelloWorld>