具名插槽
<Recommend> //我是子组件页面引入的名称
<base-layout>
<template v-slot:videoClip="navlist">
<view>我是父组件内容</view>
</template>
<template>
...
</template>
必须用Base-layout包裹一下
</base-layout>
</Recommend>
子组件
<template>
<view>
<!-- 子组件写法一 -->
<slot name="videoClip">
我是具名插槽组件写法1
</slot>
<!-- 子组件写法二 -->
<videoClip>
我是具名插槽子组件写法2
</videoClip>
</view>
</template>
作用域插槽
父组件
<Recommend>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
//写法二独占默认插槽的缩写语法
<template v-slot="slotProps">
{{ slotProps.user.firstName }}
</template>
<!-- 无效,会导致警告 默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确:-->
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
<template v-slot:other="otherSlotProps">
slotProps is NOT available here
</template>
</current-user>
//写法二多组件情况用
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</Recommend>
子组件
<slot :user="user">{{user.lastName}}</slot>
export default {
data() {
return {
user:{
"lastName":"bar",
"firstName":"foo"
}
}
}
}
解构插槽prop
<Recommend-user v-slot="{ user }"></Recommend>
<Recommend-user v-slot="{ user: person }"></Recommend>
<Recommend-user v-slot="{ user = { firstName: 'Guest' } }"></Recommend>