vue的slot上方法的调用

最新推荐文章于 2024-02-01 16:06:03 发布

memedadexixaofeifei

最新推荐文章于 2024-02-01 16:06:03 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/memedadexixaofeifei/article/details/106352775

vue 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何在Vue中利用Slot特性增强组件的复用性和灵活性。通过在组件内部定义带有特定名称和动态属性的Slot，可以实现在父组件中自定义子组件的部分内容和行为。文章展示了具体的代码示例，包括如何在模板中定义Slot，以及如何在父组件中使用v-slot进行绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先定义拥有slot的组件，在slot上命名 name ,在slot上定义动态属性（实际作用在调用组件使用slot的时候用于绑定触发的方法）

<template>
	<view>
		<view class="grace-flex tool-btn-group">
			<view class="grace-flex1 grace-flex container-bg-942B18" v-if="leftStatus">                    
               <slot name="btnLeft" :changeLeft="changeLeft"></slot></view>
			<view class="grace-flex1 grace-flex container-bg-124A5C" v-if="rightStatus"> 
               <slot name="btnRight" :changeRight="changeRight"></slot></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "parent",
		data() {
			return {
				
			};
		},
		props: {
			leftStatus: {
				type: Boolean,
				default: true
			},
			rightStatus: {
				type: Boolean,
				default: true
			}
		}
	}
</script>

<style scoped lang="scss">
.tool-btn-group {
	height: 98rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.grace-flex1 {
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
	}
}
</style>

在使用slot的时候需遵循格式： v-slot:名称= { 定义的属性名 }

<article-btn-group >
	<template v-slot:btnLeft="{ changeLeft }" ><text @click="changeLeft">联系客服</text> 
    </template>
	<template v-slot:btnRight="{ changeRight }"><text @click="changeRight">立即打卡</text>    
    </template>
</article-btn-group>