List组件
<template>
<div style="border: 5px solid red;padding: 10px 100px;">
<h2 style="color:red">father</h2>
<template v-for="item in dataList">
<slot name="fatherSlot" :item="item"></slot>
</template>
</div>
</template>
<script>
import ListItem from './ListItem';
export default {
name:'List',
components: {
ListItem
},
props: {
dataList:{
type: Array,
default: () => []
}
}
}
</script>
ListItem组件:
<template>
<div style="border: 5px solid green;margin: 20px;">
<h4 style="color: green;">child</h4>
<slot name="child"></slot>
</div>
</template>
<script>
export default {
name:'ListItem',
}
</script>
使用List组件:
<template>
<div style="border: 5px solid blue;padding: 10px 50px;">
<h2 style="color: blue;">oldfather</h2>
<List :dataList="list" v-slot:fatherSlot="slotProps">
<ListItem slot="fatherSlot">
<div slot="child">{{slotProps.item.title}}</div>
</ListItem>
</List>
</div>
</template>
<script>
import List from './List';
import ListItem from './ListItem';
export default {
name:'OldFather',
components: {
ListItem,
List
},
data () {
return {
list:[
{'title':"山中高士晶莹雪"},
{'title':"世外仙株寂寞林"},
{'title':"千红一哭,万艳同悲"},
],
}
},
}
</script>
效果:
![image.png image.png](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
vue插槽的官方文档上说:当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot
直接用在组件上
![image.png image.png](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
问题:像上面这样一个具名插槽, v-slot
直接用在组件上了,竟然能渲染出效果。更符合语法规范的写法是啥
这样?
![image.png image.png](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
这插槽加上循环嵌套,还垮了两层作用域,彻底给我整迷糊了。。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…