Vue，Uni作用域插槽的使用，以及如何在插槽传出参数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录 前言一、子组件相关代码二、在父组件中使用原始写法2.简写3.oncheck方法获取到的数据

---

前言

比如我这里的有个组件封装的需求，通过子组件定义好的插槽在父组件插入子组件定义的插槽点击按钮时传出当前选中的对象数据

---

`提示：以下是本篇文章正文内容

一、子组件相关代码

关键行 slot name=“btn” :item=“item”

<template>
	<view>
		<view v-for="(item, index) in baseList" :key="index">
			<text>{{ item.title }}</text>
			<slot name="btn" :item="item">
		</view>
	</view>
</template>

<script>
export default {
	name: 'base-box',
	props: {
		baseList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	}
};
</script> 

二、在父组件中使用 原始写法

代码如下：

<template> 
	<basebox :baselist="baseList">
		<template slot="btn" slot-scope="scope">
			<button  @click="oncheck(scope)">点击</button>
		</template>
	</basebox> 
</template>

<script>
import basebox from '@/components/base-box/index';
export default {
	components: {
		basebox
	},
	data() {
		return {
			baseList: [
				{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				}
			]
		};
	},
	methods: {
		oncheck(e) {
			console.log(e);
		}
	}
};
</script>

2.简写

代码如下（示例）：

<template> 
	<basebox :baseList="baseList">
		<template #btn="data">
			<button @click="oncheck(data)">点击</button>
		</template>
	</basebox>
</template>

3.oncheck方法获取到的数据

---