目录
- [1. slot插槽](#1. slot插槽)
-
- [1.1 默认插槽](#1.1 默认插槽)
- [1.2 具名插槽](#1.2 具名插槽)
- [1.3 作用域插槽](#1.3 作用域插槽)
1. slot插槽
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件向子组件传递数据
1.1 默认插槽
Category.vue:
-
定义一个插槽。等着组件的使用者进行填充
-
可以在子组件Category.vue给插入的html结构定义CSS样式,也可以在父组件App.vue给插入的html结构定义CSS样式
<template>{{title}}分类
<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
App.vue:直接在使用子组件的标签中,插入html结构,同时可以传递数据到html。如果子组件不定义slot插槽,则插入的html结构保存在子组件的$slots上
<template>
<div class="container">
<Category title="风景" >
<img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
</Category>
<Category title="游戏" >
<ul>
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ul>
</Category>
<Category title="电影">
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</Category>
</div>
</template>
<script>
import Category from './components/Category'
export default {
name:'App',
components:{Category},
data() {
return {
games:['红色警戒','穿越火线']
}
}
}
</script>
<style scoped>
.container{
display: flex;
/*主轴对其,每个元素之间分配相同的空间*/
justify-content: space-around;
}
</style>
显示效果如下:
1.2 具名插槽
Category.vue:给slot定义name属性,区分不同的插槽
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot name="center">我是一些默认值,当使用者没有传递具体结构时,center插槽会出现</slot>
<slot name="footer">我是一些默认值,当使用者没有传递具体结构时,footer插槽会出现</slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title']
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h3{
text-align: center;
background-color: orange;
}
video{
width: 100%;
}
img{
width: 100%;
}
</style>
App.vue:
-
通过slot属性将html结构放入不同的slot插槽
-
可以将多个标签直接放入相同name的插槽
-
使用template可以将多个标签放入slot插槽,还不用多一层标签。v-slot只能在template标签上使用
<template><Category title="风景" > 更多风景 </Category>
</template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { games:['红色警戒','穿越火线'] } } } </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style><Category title="游戏" > <ul slot="center"> <li v-for="(game,index) in games" :key="index">{{game}}</li> </ul> <div class="foot" slot="footer"> <a href="http://www.baidu.com">单机游戏</a> <a href="http://www.baidu.com">网络游戏</a> </div> </Category> <Category title="电影"> <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> <template v-slot:footer> <div class="foot"> <a href="http://www.baidu.com">经典</a> <a href="http://www.baidu.com">热门</a> </div> <h4>欢迎前来观影</h4> </template> </Category> </div>
显示效果如下:
1.3 作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。例如games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定
Category.vue:将多个属性以object的方式,传递给slot的使用者
<template> <div class="category"> <h3>{{title}}分类</h3> <slot :games="games" msg="游戏很好玩吧">我是默认的一些内容</slot> </div> </template> <script> export default { name:'Category', props:['title'], data() { return { games:['红色警戒','穿越火线'], } }, } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 200px; } h3{ text-align: center; background-color: orange; } </style>
App.vue:slot的使用者接收数据,然后将数据以不同的html结构插入到slot插槽
<template> <div class="container"> <Category title="游戏"> <!-- slot的使用者接收数据 --> <template v-slot="obj"> <ul> <li v-for="(game,index) in obj.games" :key="index">{{game}}</li> </ul> <h4>{{obj.msg}}</h4> </template> </Category> <Category title="游戏"> <template v-slot="{games}"> <ol> <li style="color:red" v-for="(game,index) in games" :key="index">{{game}}</li> </ol> </template> </Category> <Category title="游戏"> <template v-slot="{games}"> <h4 v-for="(game,index) in games" :key="index">{{game}}</h4> </template> </Category> </div> </template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, } </script> <style scoped> .container{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>
效果如下: