Vue插槽slot

1插槽的简单使用

vue实例：

myTemplate组件模版：

html:

my-template标签中的内容会替换myTmplate组件slot标签中的内容，如果my-template标签中没有其他内容，则默认显示myTmplate组件slot标签中的内容。

2具名插槽

myTemplate组件模版：

html:

通过给myTemplate组件中的slot标签添加name属性指定一个自定义名字

并给my-template标签中的button标签添加slot属性，值为slot标签的name属性的值，以此来覆盖对应的slot标签

3作用域插槽

myTemplate组件模版：

html:

数据来源：

作用：通过父组件改变子组件中内容的展示方式

在myTemplate组件中通过给slot标签绑定自定义属性（data），并将数据（goodList）绑定上去。（ : data=“goodList” ）

在外部的my-template标签里的内容标签（template）定义slot-scope属性来绑定作用域，值为slot

并通过slot.[slot标签中绑定数据的自定义属性名]获取数据（slot.data）。

Vue插槽slot

原文：https://www.cnblogs.com/chujunqiao/p/11807021.html