vue 之 slot插槽

时间:2021-07-12 21:10:12

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,父组件决定插槽显示或不显示以及怎样显示,子组件决定插槽在那个位置显示

插槽分为单个插槽,具名插槽,作用域插槽

单个插槽 | 匿名插槽

单个插槽 也叫匿名插槽 。匿名插槽就是没有名字的的插槽 与之相对的为具名插槽(稍后会讲)

例(单个插槽)

在父组件内引用子组件,并在子组件标签内随便填写一些东西

vue 之 slot插槽

在子组件内写一个空标签<slot></slot>

vue 之 slot插槽

结果

vue 之 slot插槽

可以在插槽内填写默认值

vue 之 slot插槽

vue 之 slot插槽

结果

vue 之 slot插槽

注意:1)如果在父组件内已填写了内容,那么在子组件内的<slot></slot>里填写的内容将不生效

            2)在组件内只允许存在一个匿名插槽

具名插槽

就是有name的插槽

vue 之 slot插槽

vue 之 slot插槽

结果

vue 之 slot插槽

具名插槽可以在一个组件中出现N次。出现在不同的位置。

作用域插槽 | 带数据的插槽

作用域插槽要求,在slot上面绑定数据

vue 之 slot插槽

vue 之 slot插槽

结果

vue 之 slot插槽

写的比较浅,继续练习!!!!!