插槽

插槽

			默认情况下组件标签包裹的元素是不显示的，如果需要将包裹的元素进行显示，那么就需要使用插槽
    插槽的作用就是接收组件标签内部嵌套的元素

一、匿名插槽

匿名插槽
组件标签内部包裹的元素，在组件内部通过slot这个内置组件进行接收，如果说slot组件标签上没有加name这个
属性的时候,当前插槽叫做匿名插槽它会接收所有组件标签包裹的元素

app.vue

<template>
  <div class="app">
    <Header>
     电影
    </Header>
  </div>
</template>


<script>
import Header from "./components/header"
export default {
  name: "App",
  components:{
    Header
  }
 
};
</script>


<style>
.app {
  height: 100%;
}
</style>

index.vue

<template>
    <div id="header">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name:"Header",
}
</script>

<style >
    #header{
        position: absolute;
        left: 0;
        top:0;
        width:100%;
        height:40px;
        background: #c33;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center
    }

    #header p{
        position: absolute;
        left:10px;
        font-size: 15px;
    }
</style>

二、具名插槽

具名插槽
        组件标签内部包裹的元素，如果元素身上具有slot属性的时候，我们在组件内部就可以通过指定的slot名称获取指定的
        元素。
            语法：
                    <p slot="username"></p>

                组件内部
                    <slot name="username"></slot>
     index.vue中

<template>
    <div id="header">
        <slot name="a"></slot>
            <h2>{{title}}</h2>
        <slot name="b"></slot>
    </div>
</template>

<script>
export default {
    name:"Header",
    data(){
        return{
            title:"电影"
        }
    }
}
</script>

<style >
    #header{
        position: absolute;
        left: 0;
        top:0;
        width:100%;
        height:40px;
        background: #c33;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center
    }

</style>

App.vue中

<template>
  <div class="app">
    <Header>
       <p slot="a">111</p>
       <p slot="b">222</p>
    </Header>
  </div>
</template>


<script>
import Header from "./components/header"
export default {
  name: "App",
  components:{
    Header
  }
 
};
</script>


<style>
.app {
  height: 100%;
}
</style>

三、插槽作用域

简单的理解插槽作用域其实就是带参数的插槽

        接收:在组件标签内部书写一个template组件，属性为v-slot值为传递过来的属性(是一个对象)
        template内部包裹的是需要嵌套的内容


        传递:组件内部：
            通过给slot绑定自定义属性值为需要传递的参数

index.vue中

<template>
    <div id="header">
        <!-- <slot name="a"></slot>
            <h2>{{title}}</h2>
        <slot name="b"></slot> -->
        <!-- 具名插槽 -->

        <slot icon="&lt;" title="电影"></slot>
    </div>
</template>

<script>
export default {
    name:"Header",
    data(){
        return{
            title:"电影"
        }
    }
}
</script>

<style >
    #header{
        position: absolute;
        left: 0;
        top:0;
        width:100%;
        height:40px;
        background: #c33;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center
    }

</style>

App.vue中

<template>
  <div class="app">
    <Header>
       <!-- <p slot="a">111</p>
       <p slot="b">222</p> -->
       <!-- 具名插槽 -->


      <template v-slot="props">
        <p slot="a">{{props.icon}}</p>
        <p slot="a">{{props.title}}</p>
      </template>
    </Header>
  </div>
</template>


<script>
import Header from "./components/header"
export default {
  name: "App",
  components:{
    Header
  }
 
};
</script>


<style>
.app {
  height: 100%;
}
</style>