vue组件-插槽

vue中的插槽

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

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

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

默认插槽

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

vue组件-插槽_第1张图片

具名插槽

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

代码演示效果如下

定义父子组件,并在父组件中使用子组件vue组件-插槽_第2张图片子组件vue组件-插槽_第3张图片运行起来效果就如下vue组件-插槽_第4张图片我们可以用一张图更直观的感受一下

vue组件-插槽_第5张图片

作用域插槽

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

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

props允许父向子传入数据

插槽允许父向子传入结构

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

vue组件-插槽_第6张图片

你可能感兴趣的:(vue.js,前端,javascript)