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数据。