2021-10-19

简单记录一下vue插槽的使用

<!-- 父组件里使用子组件将内容插入到子组件 -->
<child>
	<template v-slot:child>
		<!-- 这里输入要插入的内容 -->
		<div>456</div>
	</template>
</child>


<!-- 子组件child里 -->
<template>
	<div>
		<div>123</div>
	<!-- 具体位置使用插槽接收内容 -->
		<slot name="child"></slot>
	</div>
</template>

带数据使用

<!-- 父组件里使用子组件将内容插入到子组件 -->
<child>
	<template #child="{item}">
		<!-- 这里输入要插入的内容, 可以根据子组件传递过来的item变量使用子组件数据 -->
		<div>{{item}}</div>
	</template>
</child>


<!-- 子组件child里 -->
<template>
	<div>
		<div>123</div>
	<!-- 具体位置使用插槽, 其中item是要传递给父组件使用的变量 -->
		<slot name="child" :item="item"></slot>
	</div>
</template>