slot插槽的使用場景
父組件向子組件傳遞dom時會用到插槽
作用域插槽：當同一個子組件想要在不同的父組件里展示不同的狀態，可以使用作用域插槽。展示的狀態由父組件來決定
注：想要修改父組件向子組件傳遞的元素的樣式時，只能在對應的子組件進行修改
1.具名插槽的使用
父組件
<template
slot="
header">
<p>我是頭部</p>
</template>
子組件
<slot name="
header"></slot>
2.作用域插槽的使用1
父組件
<template
slot-scope="
props">
<li>{{
props.content}}</li>
</template>
子組件
<ul>
<slot v-for="
item of list" :
content=
item></slot>
</ul>
<script>
export default {
data(){
return {
list:['zhangsan','lisi','wangwu']
}
}
}
</script>
3.作用域插槽的使用2
父組件
<template
slot-scope="
props">
<tr>
<td>{{
props.item.name}}</td>
<td>{{
props.item.age}}</td>
</tr>
</template>
子組件
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<slot v-for="
item of data" :
item=
item></slot>
</table>
<script>
export default {
data(){
return {
data:[{
name:'張三',
age:20
},{
name:'李四',
age:14
},{
name:'王五',
age:10
}]
}
}
}
</script>
2.作用域插槽的使用