让父组件可以向子组件指定位置插入HTML结构,也是一种组件间通信方式,适用于 父组件==>子组件
默认插槽
父组件往子组件标签内部放东西时,Vue不知道该放哪,需要在放的地方定义一个插槽(挖个坑,等组件使用者进行填充)。
子组件中:
<slot>默认值,没有传递具体结构时,会出现</slot>
具名插槽
name
属性给<slot>
起名字,组件标签内的标签设置slot
属性为匹配插槽<slot>
标签的name
属性
子组件中:
<slot name="footer">默认值,没有传递具体结构时,会出现</slot>
用<template>
包裹插槽结构时可以写成如下简写:
footer为匹配插槽名
父组件中:
<template v-slot:footer></template>
作用域插槽
数据在定义插槽的组件(子),需要根据数据生成结构的是插槽的使用者(父)。
会将定义插槽的组件数据games传递给插槽的使用者
传递给<slot>
的结构必须由<template scope="">
包裹,才能拿到数据,scope
也可以写slot-scope
scope
的值自定义,比如hello,通过hello.games
拿到数据
子组件中:
数据在子组件本身
<slot :games="games">默认值,没有传递具体结构时,会出现</slot>