普通插槽
定义插槽
带name属性的为具名插槽,不带name属性的是默认插槽(会带有隐含的名字default)
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
填充插槽内容
具名内容必须在template元素内定义,通过v-slot绑定,
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
作用域插槽
如果想让插槽内容,能够访问子组件中的数据,需要使用作用域插槽
绑定属性
通过v-bind,把数据作为slot插槽的一个属性绑定,称为插槽 prop
<slot v-bind:user="user"> {{ user.lastName }} </slot>
访问子组件属性
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
解构插槽props
<current-user v-slot="{ user }"> {{ user.firstName }} </current-user>
具名插槽简写
#号后面必须跟插槽name
<current-user #default="{ user }"> {{ user.firstName }} </current-user>