![cbf268a5badadc3ffc743c1de70b2cad.png](https://i-blog.csdnimg.cn/blog_migrate/c1f64caffbbb4e8e48e6469ba4a19757.jpeg)
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
1.插槽
<template>
//创建slots.vue
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Slots',
}
</script>
<style>
</style>
主文件引入
<template>
<div>
App
//原生效果
//<Slots />
//插槽效果。这样在中间可以嵌套内容
<Slots>
<div>
//这里的内容会被插入到Slots中显示
我是插槽
</div>
</Slots>
</div>
</template>
<script>
import Slots from './Slots'
export default {
name:"App",
compinents:{
Slots
}
}
</script>
<style>
</style>
2.默认插槽
如果主页面不传值就会显示插槽默认值,如果主页面传值就会显示主页面的值。
<template>
<div>
<slot>插槽默认值</slot>
</div>
</template>
<script>
export default {
name: 'Slots',
}
</script>
<style>
</style>
App页面
<template>
<div>
App
<Slots>
<div>
我是插槽
</div>
</Slots>
</div>
</template>
<script>
import Slots from './Slots'
export default {
name:"App",
compinents:{
Slots
}
}
</script>
<style>
</style>
3.具名插槽
实现加载的时候加载到不同位置,通过不同位置来标识是哪个div。这个时候就需要把每一个结构指定一个名称。优点就是通过名字和不同的结构进行匹配,默认插槽只能匹配一个结构。
主页面传递
<template>
<div>
App
<Slots>
<template v-slot:head>
头部
</template>
<template v-slot:body>
身体
</template>
<template v-slot:foot>
底部
</template>
</Slots>
</div>
</template>
<script>
import Slots from './Slots'
export default {
name:"App",
compinents:{
Slots
}
}
</script>
<style>
</style>
slots页面显示
<template>
<div>
<div>
<slot nema="head"></slot>
</div>
<div>
<slot nema="body"></slot>
</div>
<div>
<p> 我是分割线 </p>
</div>
<div>
<slot nema="foot"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Slots',
}
</script>
<style>
</style>