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

---

前言

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

---

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

一、子组件相关代码

关键行 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方法获取到的数据

---