注意:2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。
父组件模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在自作用域中编译的。
插槽分为三类:
1.匿名插槽(默认插槽),没有命名有且只有一个
2.具名插槽,即slot带有name
3.作用域插槽,子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)
在子组件通过slot添加匿名插槽
<template> <div class="container"> <header> <slot></slot> </header> <div>children</div> </div> </template>
父组件使用插槽
<template> <div> <children> <template>Father use slot</template> </children> </div> </template>
效果:
<slot>有name特性,当不填时默认为default,上例实际是子组件<slot name="default"/>,父组件
<template v-slot:default>默认插槽</template>
即指定子组件中name特性的值
<template> <div class="container"> <slot></slot> <header> <slot name="title"></slot> </header> <div>children</div> </div> </template>
父组件
<template> <div> <children> <template>默认插槽</template> <template v-slot:title>具名插槽</template> </children> </div> </template>
效果:
能够访问子组件中才有的数据,重点是用slotProps接收子组件里的属性
子组件
<template> <div class="container"> <header> <slot name="header" :user="user">{{user.lastName}}</slot> </header> </div> </template> export default { data() { return { user: { firstName: "l", lastName: "pr" } }; }, };
父组件
//slotProps可以随意命名,接收的是子组件标签slot上属性数据的集合
<template> <div> <children> <template #header="slotProps"> <div>{{slotProps.user.firstName}}</div> <div>{{slotProps.user.lastName}}</div> </template> </children> </div> </template>
效果:
结构prop
即是es6的解构赋值,子组件不变,父组件
<children> <template #header="{user,arr}"> <div>{{user.firstName}}</div> <div>{{arr[1]}}</div> </template> </children>
在data中指定dynamicSlotName,通过改变dynamicSlotName的值来变换插槽
<template v-slot:[dynamicSlotName]> ... </template>
v-slot:header缩写为#header
原文:https://www.cnblogs.com/Mijiujs/p/12213392.html