前置步骤
在中pages.json 如下图，可进行全局组件的引用
需要文件：index.vue(主页) my-form.vue(组件)
1、以组件内容为默认视图
my-form.vue(组件)
<template> <view> <view>默认视图</view> <slot></slot> </view> </template>
index.vue(主页)
<!--引入组件--> <my-form> 新加的视图代码 </my-form>
效果
2、后备内容（当插槽未有内容时，显示默认的内容）
3、具名插槽
可以给组件中的<slot> 添加name，<slot name="aaa">，此时 该<slot name="aaa"> 将绑定父级中指定的“v-slot:name”
my-form.vue(组件)：
<template> <view> <view>默认视图（子级）</view> <slot name="aaa">指定绑定slot，名字为aaa(子级)</slot> <slot>未绑定slot，无名字(子级)</slot> </view> </template>
index.vue(主页)
<!--引入组件--> <my-form> <view :slot="‘aaa‘">指定aaa视图代码（父级）</view> <!--或者--> <template v-slot:aaa>作用同上，但是同name下等级比较高，优先渲染</template> <view>未指定任何name的视图代码（父级）</view>
</my-form>
效果
4、解结构插槽（将组件data中的数组数据，返回给父级的视图，从父级遍历渲染插槽，感觉有点鸡肋）
my-form.vue(组件)：
<template> <view> <slot :postData="postData">未绑定slot，无名字(子级)</slot> </view> </template> <script> export default { name: "my-form", data() { return { postData:[{ title:"标题" }] } }, } </script>
index.vue(主页)
<my-form> <template v-slot="{postData}"> <view v-for="(item,index) in postData" v-key="index"> {{item.title}} </view> </template> </my-form>
效果
基于第4点，可以将data 放在父级，由父级传给子级，
index.vue(主页)
<template> <view> <!--引入组件--> <view class="slot-item"> <my-form :todos="todos"> <!--绑定一个命名为“slotName”的slot--> <template v-slot:slotName="{ thisItemData }"> <span v-if="thisItemData.isComplete">?</span> {{ thisItemData.text }} </template> </my-form> </view> </view> </template> <script> export default { data() { return { todos: [{ text: "aa", id: "aa", isComplete: false }, { text: "bb", id: "bb", isComplete: true }, { text: "cc", id: "cc", isComplete: false }] }; }, } </script>
my-form.vue(组件)：
<template> <view> <view v-for="(todoitem,todoIndex) in todos" :key="todoIndex"> <!--通过thisItemData 返回给父级--> <slot name="slotName" :thisItemData="todoitem"> <!-- 后备内容 --> {{ todoitem.text }} </slot> </view> </view> </template> <script> export default { name: "my-zujian", props: { todos: { //类型 type: Array, default: function () { return [] } } }, data() { return {} }, } </script>
结果：
参考来源：https://blog.****.net/qq_40666120/article/details/106899722