1.v-slot基本用法:
如果不使用插槽,在父组件的子组件标签内部写的内容是无效的,这就是插槽的作用,使用具名插槽更清晰明了:
父组件中:
<template>
<div>
<child1>
//注意 v-slot 只能添加在 <template> 上 (只有一种例外情况),这一点和已经废弃的 slot 特性不同
<template v-slot:footer="props">写法1,//这里的props是自定义的名字
//<template v-slot:footer="{user}">写法2,对象的形式,这里是缩写,对象的键可以更名,如{parentUser:user}
<div>
{{user.name}}//写法2,直接拿到user
<!-- {{props.user.name}}+{{props.user.tel}} -->//写法1,使用props的写法这样拿到子组件中的数据
</div>
</template>
</child1>
</div>
</template>
子组件中:
<template>
<div class="contain">
<button>changeNum</button>
<slot name="footer" :user="user"></slot>//此处可将user对象传到父组件
<son v-bind="$attrs" v-on="$listeners"/>
</div>
</template>