1.解释

将父组件的内容插到子组件的对应位置，在子组件中使用slot，父组件使用子组件时，中间的内容部分会替换子组件slot所占位的部分

2.基本使用

  <div id="app">
      <login>
        <h2>我是一个插槽</h2>
      </login>
    </div>
    <template id="login">
    <div>
        <h1>一切情语皆景语</h1>
        <slot></slot>
    </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const login={
            template:"#login",
            data(){
                return {
                }
            },
            methods:{
            }
        }
   const vm=new Vue({
       el:"#app",
       data:{
       },
       components:{
           login
       }
   })

插槽的内容可以是一段文字，也可以是dom节点，除此之外还可以是一个组件

  <div id="app">
      <login>
        <!-- 这里是插槽的位置，但是此时他是一个组件 -->
       <txt></txt>
      </login>
    </div>
    <template id="login">
    <div>
        <h1>一切情语皆景语</h1>
        <slot></slot>
    </div>
    </template>
    <template id="txt">
        <div>
            <p>我是一个txt组件</p>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const txt={
            template:"#txt"
        }
        const login={
            template:"#login",
        }
   const vm=new Vue({
       el:"#app",
       components:{
           login,
           txt
       }
   })

3.具名插槽

如果需要使用多个插槽，这是就需要用到具名插槽,slot的name与使用插槽slot时的属性值一致,这里的插槽可以使用data里的数据，这里可以将slot换成#

<div id="app">
    <h1>这是一个父组件</h1>
         <page >
        <header slot="header">我是头部内容</header>
         </page>
     <section>
        <page >
            <section slot="body">我是主体内容{{book}}</section> 
           </page>
     </section>
         <!-- 使用插槽，slot后面的属性值与插槽名相对应 -->
        <page >
           <footer slot="footer">我是底部内容</footer> 
        </page>
    </div>
    <template id="page">
   <div>
       <!-- 这里用了三个插槽，分别对应三块内容，给插槽起对应的名字 -->
       <slot name="header"></slot>
       <slot name="body"></slot>
       <slot name="footer"></slot>
   </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const page={
            template:"#page",
            // data(){
            //     return{
            //         book:"wansgu"
            //     }
            // }
        }
        const vm=new Vue({
           el:"#app",
           data:{
               book:"围城"
           },
           components:{
              page
           }
        })

4.子组件的数据在父组件插槽中使用

1.首先在组件的slot中需要动态绑定一个属性，将要传入到父组件的插槽位置的数据绑定上去
2.父组件中默认插槽的位置可以使用这个数据，需要在组件上定义一个v-slot=”slotProps”,在slotProps中可以获取到子组件传递过来的数据

  <div id="app">
      <login v-slot="slotProps">
          <div>{{slotProps.user.lastName}}</div>
      </login>
    </div>
    <template id="login">
        <span>
            <slot :user="user"></slot>
       </span>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const login={
            template:"#login",
            data(){
                return{
                    user:{
                        firstName:"wang",
                        lastName:"su"
                    }
                }
            }
        }
    const vm=new Vue({
        el:"#app",
        components:{
            login
        }
    })