简述slot插槽


vue中的插槽(slot),是组件当中的一块HTML模板。父组件决定插槽是否显示以及如何显示,不过显示位置由子组件决定,将插槽放在中的哪个位置,模板就展示在哪个位置。

1.默认插槽(无name属性,或称匿名插槽)

示例:

(父组件代码↓)

(子组件代码↓)

(效果↓)

在上面例子中,父组件在里面写了html模板,子组件的slot会被该模板覆盖掉!

如果子组件具有多个匿名插槽(↓)

效果(↓)

2.具名插槽(将slot标签上加入name属性)

示例:

(父组件代码↓)

(子组件代码↓)

(效果↓)

 在上面示例中,可以看出父组件通过模板上添加slot属性与具名插槽的进行关联,没用name属性的slot展示匿名插槽。

3.作用域插槽(slot-scope, 使用子组件的任何数据 来达到自定义显示内容的目的)

示例:

(子组件代码↓)



(父组件代码↓)


(效果↓)

vue