Vue常见使用(1)-插槽slot的用法

我们知道vue项目通常由多个组件构成。然而在使用父子组件的时候,总想在父组件中自定义一些标签来插入到内部子组件中,而在vue2.1.0+新增了一种插槽机制。

插槽子组件中给你的HTML模板占了一个位置。插槽又分为 匿名插槽、具名插槽、作用域插槽。

1.匿名插槽

当slot没有指定name属性值的时候,它隐藏的name属性为default。一个组件内只有有一个匿名插槽。

父组件:

子组件: child.vue

匿名插槽效果

2.具名插槽

具名插槽就是给插槽进行命名。父组件在调用的时候,可以使用v-slot绑定名称从而实现对应,v-slot也可以缩写为# 。

子组件: