之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解:
一般vue的slot用法有两种,一种是单独使用,一种是具名solt
1.单独使用:
? 如下,如果子组件中没有使用slot,则父组件中的文本不会便宜香港vps显示:
? 父组件代码:
??
? 子组件代码:
??
? 运行现象:
??
?当子组件使用slot分发时,具体代码和现象如下:
?子组件:
?
运行现象:
2.具名slot
? <slot>元素在子组件中定义属性name的值,与父组件中的slot值相呼应,则分发成功;否则,分发失败
如下:
父组件:
子组件:
运行现象:
?
?
?
?
37228868