在使用时间轴 uview 组件的时候,发现使用插槽 slot 使的自定义组件非常的灵活,于是学习下:
官网: https://uniapp.dcloud.net.cn/tutorial/vue-components.html#插槽
- 未使用插槽的时候, 使用
componentA组件,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
// 组件中添加 <view>你好啊</view>, 是无效的,内容会被抛弃
<template>
<view>
<!-- 我是组件 -->
<componentA>
<view>你好啊</view>
</componentA>
</view>
</template>
- 注意在使用
<slot>时的位置,位置取决于在模板中的位置
componentA 模版
<template>
<view>
<view class=""> 我是子模版 </view>
<slot></slot>
</view>
</template>
父类使用
<template>
<view>
<componentA style="background: #9999;">
<view class="">我是父类第一行</view>
</componentA>
</view>
</template>
效果:
WeChatf16b5a68ac6f2b6ad6934fc1c41cca1f.jpg
- 设置默认内容.
默认内容: 在组件中用 <slot> 包括
自定义内容: 在父类中, 在该组件中自定内容即可
例如:
submitButton 组件
<template>
<view>
<slot>
<view class="" style="background-color: bisque;">组件默认数据一</view>
<view class="" style="background-color: palevioletred;">组件默认数据二</view>
</slot>
</view>
</template>
父类使用
<template>
<view>
<!-- 组件 -->
<submitButton>
<!-- 自定义内容 -->
<view class="" style="background-color: palevioletred;">新增</view>
</submitButton>
</view>
</template>
效果:
WeChat05812c146cc02685e7602b5c3d027e11.jpg
- 需要多个插槽时, 用name 来定义具名插槽
注意:
v-slot 只能添加在 <template> 上
一个不带 name 的 <slot> 出口会带有隐含的名字 “default”
使用规则:
1 . 在<slot> 中定义 name 来定义不同的插槽名称;
例如:
// header
<slot name="header"></slot>
// 默认
<slot></slot>
// footer
<slot name="footer"></slot>
- 在向具名插槽提供内容的时候，我们可以在一个
<template> 元素上使用 v-slot 指令，并以v-slot 的参数的形式提供其名称;
例如:
submitButton 组件
<template>
<view>
// 头部
<view class="header">
<slot name='header'>头部</slot>
</view>
// 默认
<view class="main">
<slot name="default">默认</slot>
</view>
// 页脚
<view class="footer">
<slot name="footer">页脚</slot>
</view>
</view>
</template>
父类引用组件
<template>
<view>
<submitButton>
<!-- 自定义头部 -->
<template v-slot:header>
<view class="">头部内容</view>
</template>
<!-- 自定默认部分 -->
<template>
<view class="">默认内容</view>
</template>
<!-- 自定义底部 -->
<template v-slot:footer>
<view class="">底部内容</view>
</template>
</submitButton>
</view>
</template>
效果:
WeChatba3f221cbe1c98774a5731d613a4f269.jpg
- 具名插槽的缩写
v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。
例如: v-slot:header 可以被重写为#header ：
v-slot 缩写 #
<template>
<view>
<submitButton>
<!-- 定义头部 -->
<template #header>
<view class="">头部内容</view>
</template>
<!-- 自定默认部分 -->
<template>
<view class="">默认内容</view>
</template>
<!-- 定义底部 -->
<template #footer>
<view class="">底部内容</view>
</template>
</submitButton>
</view>
</template>
- 父类访问组件中插槽的数据;
注意: 只能用于默认插槽
1. 在插槽元素上绑定属性
<!-- 子组件 <current-user>-->
<template>
<view>
<slot :user="user">{{user.lastName}}</slot>
</view>
</template>
<script>
export default {
data() {
return {
user:{
"lastName":"bar",
"firstName":"foo"
}
}
}
}
</script>
2. 在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
<template>
<view>
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
</view>
</template>
或者
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>
