Vue2的slot
有具名插槽内容就不会显示匿名插槽的内容了。
template 相当于包过内容的块。
效果
目录结构
app.vue文件引入
代码
<!-- index.vue -->
<template>
<div class="slotswomo">
<layout>
<!-- 具名插槽 -->
<template slot="header">我是header</template>
<!-- 匿名插槽 -->
<template>我是匿名插槽</template>
<!-- 作用域插槽 -->
<template v-slot="slotProps">{{ slotProps.footer }}</template>
</layout>
</div>
</template>
<script>
import Layout from '@/components/slotswomo/Layout'
export default {
components: {
Layout,
}
}
</script>
<style>
.slotswomo {
border: 1px solid springgreen ;
margin-top: 40px;
}
</style>
<!-- Layout.vue -->
<template>
<div>
<div>
<slot name="header"></slot>
</div>
<div class="body">
<slot></slot>
</div>
<div class="footer">
<slot :footer="xx"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
xx: '我是底部'
}
}
}
</script>