插槽
默认情况下组件标签包裹的元素是不显示的,如果需要将包裹的元素进行显示,那么就需要使用插槽
插槽的作用就是接收组件标签内部嵌套的元素
一、匿名插槽
匿名插槽
组件标签内部包裹的元素,在组件内部通过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="<" 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>