Vue插槽使用

一、什么是插槽

官网解释：插槽(slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。

正常情况下，我们想要把父组件的数据传递给子组件，方法有很多，比如属性绑定，子组件在props里面进行接受；也可以在父组件里面给子组件加一个ref属性，在直接this.$refs.子组件ref值.子组件属性名进行数据传递。方法很多，其中，slot也可以做到这个效果。

二、插槽的分类

匿名插槽，具名插槽，作用域插槽。

三、具体使用

1.匿名插槽

在匿名插槽使用时，只需要在子组件中加一个便签即可，当我们调用子组件时候，只需要在子组件标签中加入自己需要传递的数据就可以了。

2.具名插槽

当我们使用匿名插槽时，只能传递一个数据，但是当我们想传递多个数据，就需要用到具名插槽了。

理论上，我们的具名插槽可以使用无数个，只需要给我们的子组件里面的slot标签加上一个name，那么在父组件调用子组件的时候，我们只需要在子组件标签里面加一个标签，并且加上对应slot标签的name就可以了。

可以看出，在父组件中，我们是先写的name属性，再写的age属性，但是在子组件中我们先写的age属性，再写的nage属性，但是输出结果还是先name再age，说明，展示顺序和子组件没有关系，是和父组件调用插槽顺序相关的。

v-slot只是我们常规写法，也可以直接把v-slot:age简写为 #age，效果一样。

3.作用域插槽

如果说前面两种插槽是父组件传值给子组件，那么作用域插槽就是定义在子组件的数据，在父组件进行操作。

3.1匿名插槽传递使用作用域插槽

可以看出，当我们使用匿名插槽传递数据，父组件的三种写法是效果是一致的，当我们打印出子组件传递的数据可以看出，我们传递的data是在外面又包裹了一层对象，所以，当我们使用子组件传递的数据，可以直接用结构的方法拿到我们需要数据

3.2具名插槽传递使用作用域插槽

当我们有多个插槽时，我们需要通过name来区分插槽，同时来传递数据。

当我们用name区分插槽时，我们在子组件调用时，也需要通过不同的name来接收数据，并且可以用v-slot或者#来使用。和上述一样，我们接收到的数据也是被一层对象包裹，可以通过结构来使用。