Slot插槽,独占默认插槽的缩写语法

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

vue插槽的官方文档上说:当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上

image.png

问题:像上面这样一个具名插槽, v-slot 直接用在组件上了,竟然能渲染出效果。更符合语法规范的写法是啥
这样?
image.png

这插槽加上循环嵌套,还垮了两层作用域,彻底给我整迷糊了。。

阅读 1.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题