vue2中的插槽

vue2中的插槽

props[数学公式]属性: 各种数据类型值。子组件接收到之后做不同的判断实现不同的效果来实现复用性。

插槽：HTML dom元素。

预留属性、预留插槽。

调用语法：单闭合/双闭合。需要传插槽，就用双闭合；不需要就单双都可以。

具名插槽

具名插槽：name="xxx"，默认为default。

1. 用template包起来。
2. 用指令v-slot:header="" / #header：缩写

v-slot/#不能给标签加，只能给template加。

复用性和可扩展性。

作用域插槽

子传父。子组件中的数据，在父组件中的插槽中使用。

基于v-bind[数学公式]传递出去，通过v-bind绑定属性

父组件中：解构赋值

插槽的作用：

普通插槽：更强的复用性和可扩展性

具名插槽：多个插槽，

作用域插槽：让子组件的信息在父组件插槽中使用

dom结构传插槽，数据类型传props。

this.slots & this.scopedSlots

子组件除了在视图中能用到。

在实例上this.$slots

$scopedSlots: 作用域插槽。通过v-bind绑定属性的

$slots: 没有实现作用域插槽的。