简述slot插槽
vue中的插槽(slot),是组件当中的一块HTML模板。父组件决定插槽是否显示以及如何显示,不过显示位置由子组件决定,将插槽放在中的哪个位置,模板就展示在哪个位置。
1.默认插槽(无name属性,或称匿名插槽)
示例:
(父组件代码↓)
我是一个父组件
这里是子组件内容!
(子组件代码↓)
我是子组件
(效果↓)
在上面例子中,父组件在
如果子组件具有多个匿名插槽(↓)
我是子组件
效果(↓)
2.具名插槽(将slot标签上加入name属性)
示例:
(父组件代码↓)
我是一个父组件
这里是子组件111111
这里是子组件22222222
这里是匿名插槽
(子组件代码↓)
我是子组件
(效果↓)
在上面示例中,可以看出父组件通过模板上添加slot属性与具名插槽的进行关联,没用name属性的slot展示匿名插槽。
3.作用域插槽(slot-scope, 使用子组件的任何数据 来达到自定义显示内容的目的)
示例:
(子组件代码↓)
我是子组件
(父组件代码↓)
我是一个父组件
for="num in item.data">{{ num }}
(效果↓)