作用:让父组件可以向子组件指定位置插入HTML结构,也是一种组件间通信的方式,适用于 父组件===>子组件。
分类:默认插槽、具名插槽、作用域插槽。
默认插槽
父组件中
<List>
<h1>hello world</h1>
</List>
<script>
子组件中
<template>
<div>
<slot></slot>
</div>
</template>
具名插槽
父组件中
<List>
//给插槽起个名字
<template slot="插槽名">
<h1>hello world</h1>
</template>
</List>
子组件中
<template>
<div>
<slot name='插槽名'>插槽默认内容</slot>
</div>
</template>
作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定,数据在MyList组件中,但是用数据所遍历出来的结构由App组件决定
父组件中
<List>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="l in scopeData.names" :key="l">
{{l}}
</li>
</ul>
</template>
</List>
<List>
<template scope="scopeData">
<ul>
<!-- 生成的是h1标签 -->
<h1 v-for="l in scopeData.names" :key="l">
{{l}}
</h1>
</ul>
</template>
</List>
子组件中
<div class="category">
//slot会把games交给父组件
<slot :games="games" msg="hello">我是默认内容</slot>
<div>
<script>
export default{
name:"List",
data(){
return {games:["111","222","333"]}
}
}
</script>