1.默认插槽
1.定义
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件==>子组件
2.使用场景:只需要最基本的往组件中插入html时,可以使用默认插槽
2.示例
理解:父组件在子组件的标签内编写代码,在子组件中使用slot标签即可接收
子组件
<div class="list">
<h1>{{title}}</h1>
<slot></slot>
</div>
export default {
data(){
return{
}
},
props:['title']
}
父组件
<div class="container">
<list title="游戏">
<ul >
<li v-for="(item,index) in dataList.games" :key="index">{{item}}</li>
</ul>
</list>
<list title="汽车">
<ul >
<li v-for="(item,index) in dataList.cars" :key="index">{{item}}</li>
</ul>
</list>
<list title="电影">
<ul >
<li v-for="(item,index) in dataList.films" :key="index">{{item}}</li>
</ul>
</list>
</div>
import list from './components/list.vue'
export default ({
name:'App',
components:{list},
data(){
return{
dataList:{
games:['王者荣耀','穿越火线','洛克王国'],
cars:['奔驰','奥迪','法拉利'],
films:['海上钢琴师','肖申克的救赎','心灵捕手']
}
}
},
})
2.具名插槽
1.定义
1.作用
2.使用场景:当组件中需要使用多个插槽时,可以使用具名插槽
2.示例
理解:我们需要在组件中加入多个插槽,可以在父组件中定义slot,并在子组件中通过name对应slot
子组件
<div class="list">
<h1>{{title}}</h1>
<slot name="center"></slot>
<slot name="footer"></slot>
</div>
export default {
data(){
return{
}
},
props:['title']
}
父组件
<div class="container">
<list title="游戏">
<ul slot="center">
<li v-for="(item,index) in dataList.games" :key="index">{{item}}</li>
</ul>
<a href="" slot="footer">更多游戏</a>
</list>
<list title="汽车">
<ul slot="center">
<li v-for="(item,index) in dataList.cars" :key="index">{{item}}</li>
</ul>
<a href="" slot="footer">更多汽车</a>
</list>
<list title="电影">
<ul slot="center">
<li v-for="(item,index) in dataList.films" :key="index">{{item}}</li>
</ul>
<a href="" slot="footer">更多电影</a>
</list>
</div>
import list from './components/list.vue'
export default ({
name:'App',
components:{list},
data(){
return{
dataList:{
games:['王者荣耀','穿越火线','洛克王国'],
cars:['奔驰','奥迪','法拉利'],
films:['海上钢琴师','肖申克的救赎','心灵捕手']
}
}
},
})
3.作用域插槽
1.定义
1.作用:可以从子组件拿到数据并且向子组件插入指定数据的html结构
2.使用场景:数据存放在子组件,但是根据数据生成的结构需要由组件使用者决定,可以使用作用域插槽
2.示例
理解:
数据存放在子组件,但是我们需要根据不同的数据生成不同的结构。我们在子组件中slot中绑定list,父组件通过slot-scope或者scope接收list,接收时的参数名可以随意,此时接收的list是一个对象
比如下方示例中父组件接到的是
实际数据list的外层又被一层对象包裹,对象名为子组件中定义的属性名lists
父组件接到数据后,可以根据数据类型进行渲染,并通过slot指定插槽名,子组件通过name与父组件的插槽名对应
子组件:
<template>
<div class="list">
<slot :lists="list" name="games"></slot>
<slot :lists="list" name="cars"></slot>
</div>
</template>
export default {
data(){
return{
list:{
games:['王者荣耀','穿越火线','洛克王国'],
cars:['奔驰','奥迪','法拉利'],
}
}
},
props:['title']
}
父组件:
<template>
<div class="container">
<list>
<template slot-scope="games" slot="games">
<ul>
<li v-for="(item,index) in games.lists.games" :key="index">{{item}}</li>
</ul>
</template>
<template slot-scope="cars" slot="cars">
<ul>
<li v-for="(item,index) in cars.lists.cars" :key="index">{{item}}</li>
</ul>
</template>
</list>
</div>
</template>