作用
让父组件可以向子组件制定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件
分类
默认插槽
在组件标签中插入html结构,然后在子组件中使用标签对接收html结构
父组件:
<fuzujian>
<div>html结构</div>
</fuzujian>
子组件:
<template>
<div>
<slot>默认插槽内容,没有人传入结构时默认显示</slot>
</div>
</template>
具名插槽
在默认插槽的基础上,为每个slot起名name,然后每个tamplate设置slot参数表示向对象的slot传
父组件:
<fuzujian>
<template slot="center">
<div>html结构1</div>
</template>
<template slot="footer">
<div>html结构2</div>
</template>
</fuzujian>
子组件:
<template>
<div>
<slot name="center">默认插槽内容,没有人传入结构时默认显示</slot>
<slot name="footer">默认插槽内容,没有人传入结构时默认显示</slot>
</div>
</template>
作用域插槽
数据在组件自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在fuzujian组件中,但使用数据锁边理出来的结构有APP决定)
父组件中
<fuzujian title="游戏" >
<template scope="{games}"><!-- {}es6结构赋值 -->
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
</template>
</fuzujian >
<fuzujian title="游戏" >
<template scope="xie"><!-- 正常结构 -->
<ol>
<li v-for="(g,index) in xie.games" :key="index">{{g}}</li>
</ol>
</template>
</fuzujian >
子组件中
<template>
<div>
<h3>{{title}}分类</h3>
<ul>
<slot :games="games"></slot>
</ul>
</div>
</template>
<script>
export default{
name:'Category',
props:['title'],
data(){
return{
games:['红色警戒','穿越火线','QQ飞车','超级玛丽','英雄联盟'],
}
},
}
</script>