slot又名插槽,slot元素作为承载分发内容的出口。
作用:slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。
在父组件中实例化子组件:
<template>
<child>
要传递给子组件的数据
</child>
</template>
子组件挖个坑,用于接收:
<template>
。。。。。
<slot>
如果父组件没有传递数据,就默认用此行数据
</slot>
.........
</template>
slot又分三类,默认插槽,具名插槽和作用域插槽。
- 默认插槽:又名匿名插槽,没有设置name属性的插槽。一个组件内只有有一个匿名插槽。
- 具名插槽:带有name属性的slot,一个组件可以出现多个具名插槽。
-
- 如果父组件想要传递多个标签内容,可以使用<template>包裹
- 且用v-slot指令指定子组件中的具名插槽的位置,
- v-slot 只能添加在 <template> 上
- v-slot:default 指向默认插槽
-
- 作用域插槽:在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。
-
- 在子组件的坑(插槽)里绑定数据<slot :数据名=“数据名”></slot>
- 绑定在 <slot> 元素上的 属性childData被称为插槽 prop。
- 父组件需要通过<template slot-scope=”接收数据的别名”>
- 作用域插槽也可以配置名字:
-