基础使用--匿名插槽
-
组件内使用slot 占位
-
使用组件时 <pannel></pannel>中间传入标签替换slot
Pannel.vue
<template>
<div>
<div class="title">
<h4>鹅鹅鹅</h4>
<span @click="isShow = !isShow">{
{ isShow ? '收起' : '展开' }}</span>
</div>
<div class="container" v-show="isShow">
<!--1: 组件内使用slot 占位 -->
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
}
},
}
</script>
<style scoped>
h4 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 10px;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 10px;
}
</st