2021-11-04

vue中的slot插槽

太久没有写过博客了，今天想总结一下插槽的内容（因为在项目中有用到slot做table功能的扩展）。

插槽的分类

vue中的slot主要分为三种，分别是：

1. 默认插槽；
2. 具名插槽；
3. 作用域插槽；

默认插槽的使用

遇到父子组件传值的情况时，除了通过props和$emit之外，还可以采用slot的方式
例如

子组件的代码为

<slot></slot>

父组件中代码为

<children>
	<p>msg</p>
</children>

父组件中定义的p标签就能够被传给子组件并显示
注：父组件定义要插入到子组件的插槽的内容，并不一定只有是dom结构类型的，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。

具名插槽的使用

在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将内容根据name来填充对应的内容。
子组件的代码为

<slot name="oneone"></slot>

父组件中代码为

<children>
	<template v-slot:oneone>
		我是要给oneone插槽的信息
	</template>
</children>

作用域插槽的使用

<slot :自定义name=data中的属性或对象>