文章目录：
一：什么是插槽
二：默认插槽
2.1 默认插槽说明
2.2 默认插槽使用
classify.vue组件：
<template>
<div class="classify-box">
<div class="title">{{name}}</div>
<slot></slot> //slot设置默认插槽来占位
</div>
</template>
<script>
export default {
name:'Classify',
data() {
return {
}
},
props:['name'] //propos接收传来的标题名称
}
</script>
<style scoped>
//css太占地方就删掉了
</style>App.vue组件：
<template>
<div class="app-box">
<Classify name='热门电影'> //使用组件并在组件标签体中书写要放进插槽中的内容
<ul>
<li>肖申克的救赎</li>
<li>1912</li>
<li>零的执行人</li>
</ul>
</Classify>
<Classify name="风景">
<img src="./img/QQ图片20220818163031.jpg" alt="">
</Classify>
</div>
</template>
<script>
import Classify from './components/classify.vue' //引入组件
export default {
name: 'App',
data() {
return {
}
},
components: {
Classify:Classify //注册组件
}
}
</script>
<style scoped>
//css太占位置删掉了
</style>
这样就可以实现一个最基本的默认插槽案例了
三：具名插槽
3.1 具名插槽说明
3.2 具名插槽使用
classify.vue组件：
<template>
<div class="classify-box">
<div class="title">下面是具名插槽的内容</div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name:'Classify',
data() {
return {
}
},
}
</script>
<style scoped>
</style>App.vue组件：
<template>
<div class="app-box">
<Classify>
<div slot="header">
<span>我在header插槽中</span>
</div>
<div slot="body">
<span>我在body插槽中</span>
</div>
<div slot="footer">
<span>我在footer插槽中</span>
</div>
</Classify>
</div>
</template>
<script>
import Classify from './components/classify.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
Classify:Classify
}
}
</script>
<style scoped>
</style>
这样就简单实现了具名插槽
四：作用域插槽
4.1 作用域插槽说明
4.2 作用域插槽使用
classify.vue组件：
<template>
<div class="classify-box">
<div class="title">下面是作用域插槽的内容</div>
<slot :hobby="hobby"></slot>
</div>
</template>
<script>
export default {
name:'Classify',
data() {
return {
hobby:['打游戏','睡大觉','吃大餐']
}
},
}
</script>
<style scoped>
</style>App.vue组件：
<template>
<div class="app-box">
<Classify>
<template slot-scope="{hobby}">
<ul>
<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
</ul>
</template>
</Classify>
</div>
</template>
<script>
import Classify from './components/classify.vue'
export default {
name: 'App',
data() {
return {
}
},
components: {
Classify:Classify
}
}
</script>
<style scoped>
</style>
这样就简单实现了作用域插槽的案例