认识
2023年04月24日
一、认识
<slot></slot>
表示模板中的插槽内容出口。其中, slot
可以分为:
-
普通插槽
: 可以使用name attribute
来指定插槽名。当没有指定name
时,将会渲染默认插槽 -
作用域插槽
: 传递给插槽元素的附加attributes
将作为插槽props
,传递给父级中定义的作用域插槽。
普通插槽和作用域插槽的实现。它们有一个很大的差别是数据作用域。具体分析如下:
1.1 普通插槽
普通插槽是在父组件编译和渲染阶段生成 vnodes
,所以数据的作用域是父组件实例,子组件渲染的时候直接拿到这些渲染好的 vnodes
。
1.2 作用域插槽
对于作用域插槽,父组件在编译和渲染阶段并不会直接生成 vnodes
,而是在父节点 vnode
的 data
中保留一个 scopedSlots
对象,存储着不同名称的插槽以及它们对应的渲染函数,只有在编译和渲染子组件阶段才会执行这个渲染函数生成 vnodes
,由于是在子组件环境执行的,所以对应的数据作用域是子组件实例。
1.3 沉淀与总结
两种插槽的目的都是让子组件 slot
占位符生成的内容由父组件来决定,但数据的作用域会根据它们 vnodes
渲染时机不同而不同。
二、语法
2.1 父组件
当父组件中使用具有插槽功能的子组件时,需要传递插槽名称或者作用域等,那么需要一个含 v-slot
指令的 <template>
元素, 并将目标插槽的名字、作用域传给该指令
<Child>
// 完整写法
<template v-slot:插槽名称="传递值"></template>
// 简洁写法
<template #插槽名称="传递值"></template>
</Child>
2.2 子组件
<slot name="xxxx"></slot>
<slot name="xxxx"></slot>
是一个插槽出口,标示了父元素提供的插槽内容将在哪里渲染。其中 name
用来为各个插槽分配唯一的 ID
, 以确定每一处要渲染的内容。没有提供 name
的 <slot>
出口会隐式的命名为 <slot name="default">