Vue中的插槽

一般的插槽 可以通过以下方式进行实现
父组件

<template>
	<Son>这一句话将放入Son组件的slot标签内</Son>
</template>

子组件

<template>
	<div>
        //slot标签内部的文本 在父组件没有传递内容过来时 进行显示   属于默认内容
        <slot>/*我的内容由父组件使用时传入*/</slot>
    </div>
</template>

具名插槽

对slot组件 使用name属性 在父组件内使用v-slot:name 绑定在子组件标签内的template标签身上 是的template标签内的内容 会传入 子组件中属性为name的slot标签内

//子组件结构

<template>
	<div>
        <slot name='head'></slot>
    </div>
    <div>
        <slot name='body'></slot>
    </div>
    <div>
        <slot name='footer'></slot>
    </div>
</template>

//父组件结构
<template>
	<Son>
    	<template v-slot:head>
			我要去head里面
		</template>
        <template v-slot:body>
			我要在body里面显示
		</template>
        <template v-slot:footer>
			我要在footer里面显示
		</template>
    </Son>
</template>

作用域插槽

<template>
	<div v-for='item in xxx'>
        <slot msg='132' :row='item'></slot>
        //通过slot插槽 将slot标签的属性 以对象的方式传输至 父组件中
        /*	{
        		row:{id:xxx , name:xxx, age:xxx}//row 里面是item的信息
        		msg:'132'
        	}*/
    </div>
</template>

//父组件接收
<template>
	<Son :data='list'>
        
        //在父组件中 通过template #插槽名='变量名' 对slot标签传输的数据进行接收 对变量名无要求   如果没有设置插槽名  可以用默认的#default  进行接收 
    	<template #default = 'obj'>
			我要去head里面
		</template>
    </Son>
</template>