插槽
1. 默认插槽
2. 具名插槽
3. 备用插槽
4. 作用域插槽
// 带插槽的组件
<div>
<header>1111</header>
<slot></slot>
<footer>2222</footer>
</div>
// 使用插槽的组件
<template>
<div>
<my-component>
<div class="innerDiv"></div>
</my-component>
</div>
</template>
<script>
import cus from "./default2"
export default {
name: "default1",
components: {
myComponent: cus
}
}
</script>
// 使用插槽的组件
<style scoped lang="scss">
.innerDiv {
100px;
height: 100px;
background-color: pink;}
</style>
// 插槽组件
<header>1111</header>
<slot>uuuuuu</slot>
<footer>2222</footer>
// 使用插槽组件
<my-component>
</my-component>
<my-component>
<div>mmm</div>
</my-component>
// 不加内容默认显示<slot>标签内部的内容
// 加内容 只显示内容部份
// 插槽组件
<div>
<header>1111</header>
<slot name="age"></slot>
<footer>2222</footer>
</div>
// 使用插槽的组件
<my-component>
<div class="innerDiv"></div>
<div slot="age">hahhaha</div>
</my-component>
slot=>v-slot
// 插槽组件
<template>
<div>
<slot :dataList="list"></slot>
</div>
</template>
<script>
export default {
name: "default1",
data () {
return {
count: 1,
list: [
{ name: "lz", id: 1 },
{ name: "lz1", id: 2 },
{ name: "lz2", id: 3 },
{ name: "lz3", id: 4 },
{ name: "lz4", id: 5 },
{ name: "lz5", id: 6 },
]
}
}
}
// 使用插槽组件
<template>
<div>
<my-component>
<template v-slot:default="scope">
<div v-for="item in scope.dataList" :key="item.id">{{item.name}}</div>
</template>
</my-component>
</div>
</template>
作用域插槽参考1
作用域插槽参考2