Vue3 插槽slot

  Vue使用插槽slot的主要作用是实现组件的复用和封装，使得组件更加灵活和可定制化。具体而言，插槽可以在组件内部注入内容，实现动态渲染，同时也可以保留组件固有的结构和样式。插槽的优点在于可以使得组件更加灵活，各种不同类型的数据都可以通过插槽传递进来，实现不同表现形式。缺点在于使用插槽会导致代码的可读性变差，同时也会增加一定的执行成本。

一、默认插槽

  示例代码：

// 子组件
<template>
	<div>
		<!-- 插槽位置 -->
		<slot>插槽未被调用时会显示此内容</slot>
	</div>
</template>

// 父组件
<template>
	<!-- Child为子组件标签 -->
	<Child> 
		<!-- 定义插槽内容 -->
		<template>要插入的html内容</template>
	</Child>
</template>
<script>
	import Child from './Child.vue'
</script>

  父组件无填充时，<slot></slot>中的备用内容会启用生效

二、具名插槽

  带有 name 属性的插槽被称为具名插槽。
  示例代码：

// 子组件
<template>
	<div>
		<slot name="header">插槽未被调用时会显示此内容</slot>
		<slot name="center">插槽未被调用时会显示此内容</slot>
		<slot name="footer">插槽未被调用时会显示此内容</slot>
	</div>
</template>

//父组件
<template>
    <child-slot>
    	// 简写: #header
        <template v-slot:header>
            <div>
                顶部 —— 具名插槽
            </div>
        </template>
        <template v-slot: center>
            <div>
                中间 —— 默认插槽
            </div>
        </template>
        <template v-slot:footer>
            <div>
                底部 —— 匿名插槽
            </div>
        </template>
    </child-slot>
</template>
<script>
	import Child from './Child.vue'
</script>

默认插槽也有自己的name，只不过 name 会被隐式地命名为default。

三、作用域插槽

  与前两者不同的是，作用域插槽可以在父组件中自定义html结构，然后解析子组件data的数据。所以作用域插槽可以理解为子组件向父组件传值的一种方式。
  示例代码：

// 子组件
<template>
	<div>
		<slot :msg="msg" name='slotProps'>插槽未被调用时会显示此内容</slot>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	const msg = ref(["火锅", "红烧肉", "烤羊腿"])
</script>

// 父组件
<template>
	<Child> 
		<template v-slot:slotProps='row'>
			<span v-for="m in row.msg"></span>
		</template>
	</Child>
</template>
<script setup>
	import Child from './Child.vue'
</script>

  上述代码中row是一个插槽的属性对象。子组件中插槽绑定了msg属性，然后父组件通过row.msg获取其属性。根据自身需要自定义html结构并渲染其值。

四、总结

• 默认插槽：父组件可以决定html结构和data数据
• 具名插槽：父组件可以决定html结构和data数据
• 作用域插槽：子组件可以定义data数据，父组件可以定义html结构并渲染data数据

与props不同的是，props 主要是父组件向子组件传值，而 插槽 可以理解为根据实际需要 插入父组件的自定义html结构或data数据。