vue中的slot插槽学习

WeiflR10

已于 2022-03-02 17:26:02 修改

阅读量1k

点赞数

文章标签： vue.js 学习 elementui

于 2022-03-02 17:15:43 首次发布

本文链接：https://blog.youkuaiyun.com/WeiflR10/article/details/123235088

版权

这篇博客介绍了Vue中子父组件的交互以及插槽的使用方法。通过实例展示了如何在父组件中引入子组件，并利用slot进行内容分发。文章详细讲解了默认插槽和具名插槽的概念，帮助读者理解如何在子组件内部插入和排列自定义内容。

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

一、子父组件

这是子组件

<template>
	<view>
        我是子组件
	</view>
</template>

这是父组件

<template>
	<view>
        我是父组件
        <ys-list>
            <view>直接写是不行的</view>
        </ys-list>
	</view>
</template>
<script>
	import yslist from '../../../components/ys-list.vue'
	export default {
		components:{
			'ys-list':yslist
		}
	}
</script>

二、slot插槽

当父组件引入子组件，但是想在子组件中写其他元素时，必须要用到插槽slot

// 子组件
<template>
	<view>
        我是子组件
        <slot></slot>
	</view>
</template>


// 父组件
<template>
	<view>
        我是父组件
        <ys-list>
            <view>这样就可以了</view>
        </ys-list>
	</view>
</template>
<script>
	import yslist from '../../../components/ys-list.vue'
	export default {
		components:{
			'ys-list':yslist
		}
	}
</script>

三、slot具名插槽

// 子组件
<template>
	<view>
        我是子组件
        <view class='one'>
               第一个插槽
            <slot name='left'></slot>
	    </view>
        <view class='two'>
               第二个插槽
            <slot name='right'></slot>
	    </view>
	</view>
</template>


// 父组件
<template>
	<view>
        我是父组件
        <ys-list>
            <view slot='left'>在class名称为one的标签中显示</view>
            <view slot='right'>在class名称为two的标签中显示</view>
        </ys-list>
	</view>
</template>
<script>
	import yslist from '../../../components/ys-list.vue'
	export default {
		components:{
			'ys-list':yslist
		}
	}
</script>