vue插槽理解

1.插槽作用：父向子传递一段Html代码块

2.分类：

(1）默认插槽：规则：父给子传，用父，不传，用子。

(2）具名插槽：适用于一个页面有多个插槽时，需要做区分，使用name属性。给插槽取个名字

(3）作用域插槽：使用子组件的数据，传到父，在父改变此值，会改变子得数据。（也可使用name属性）

默认插槽：

// father.vue
<child>
	<template>
		<p>插槽内容1111</p>
	</template>
</child>

// child.vue
<slot></slot> // 页面渲染内容为 -> 插槽内容1111

具名插槽

父组件定义插槽name，子组件使用v-slot="name"（也可写成#name）接收对应插槽，可自定义插槽插入位置

// father.vue
<child>
	<template v-slot="head">
		<p>head插槽内容</p>
	</template>
		<template v-slot="body">
		<p>body内容</p>
	</template>
</child>

// child.vue
<div class="header">
	<slot name="head"></slot>
</div>
<div class="content">
	<slot name="body"></slot>
</div>

作用域插槽

子组件定义数据通过slot传递到父组件，父组件通过slotProps(自定义名称)接收插槽传递的数据

// child.vue

<slot name="footer" :datas="user"></slot>

<script>
data(){
	return{
		user:{
			name: 'Tom',
			age: 20
		}
	}
}
</script>
// father.vue
<template v-slot:footer="slotProps">
	<p>{{slotProps.datas.age}}</p>
</template>

---

以上代码部分为个人理解，如有遗漏或不恰，望各位大佬指点，谢谢