vue组件-插槽

vue中的插槽

1.组件通过插槽转入自定义结构。

2.用于组件的内容分发，通过slot标签，可以接收写在组件标签内的内容。

3.vue提供组件插槽能力，允许开发者在封装组件时，把不确定的部分定义为插槽。

默认插槽

在定义组件的时候，在template中用slot来占个位。在使用时，将组件之间的内容来填位

具名插槽

当一个组件内有两处以上需要外部传入标签的地方，这个时候就用到了具名插槽。它的定义类似于默认插槽，在slot中添加一个name，<slot name = xxx> </slot>。在使用的时候可以使用<template #xxx> </template>或者<template v-slot:xxx> </template>。传入的标签可以分别派发给不同的slot位置。

代码演示效果如下

定义父子组件，并在父组件中使用子组件子组件运行起来效果就如下我们可以用一张图更直观的感受一下

作用域插槽

当我们需要子组件的数据，在给插槽赋值时在父组件的环境下使用，这个时候我们就可以用到作用域插槽。

组件内变量绑定在slot上，然后使用组价v-slot：插槽名字=‘变量’，变量上就会绑定slot传递的属性和值。可以用一张代码图直观的感受一下。

props允许父向子传入数据

插槽允许父向子传入结构

作用域插槽允许父向子传入自定义的数据+结构