版本2.6以上版本写法
父组件
<test1>
<template v-slot:test>我是传给子组件</template>
<template v-slot:content>我是传给孙子组件</template>
</test1>
?子组件
<template>
<div>
<slot name="test"></slot>
<test2>
<template #content>子代
<slot name="content"></slot>
</template>
</test2>
</div>
</template>
孙组件
<template>
<div>
我是孙级组件<slot name="content"></slot>
</div>
</template>
v-slot 可以写成# 简写? 比如: v-slot: test? 与?#test 一样
插槽作用域: 父组件能访问子组件数据
普通写法:
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
解构写法
<template v-slot:default="{user}">
{{ user.firstName }}
</template>
具名插槽写法:
1.父组件
<template v-slot:content="{user}" >
{{ user.firstName }}
</template>
2.子组件
<slot name="content" :user="user"></slot>
|