[JavaScript知识库]vue中的slot插槽学习

一、子父组件

这是子组件

<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>