Vue中插槽(匿名插槽,具名插槽,作用域插槽)

2.具名插槽

有多个插槽,(区别哪些内容填充到哪个位置),具名插槽

自定义组件时需要预留具有名字的插槽;

Vue.component(“子组件名”, {

template: `

预留的插槽

预留的插槽

预留的插槽

`

})

引用子组件时需要指定填充哪个插槽：

<子组件名>

需要填充的内容

需要填充的内容

需要填充的内容

</子组件名>

3.作用域插槽

• 父组件对子组件加工处理

• 既可以复用子组件的slot，又可以使slot内容不一致

{{slotProps.info.name}}

{{slotProps.info.name}}