认识

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">

一、认识​

1.1 普通插槽​

1.2 作用域插槽​

1.3 沉淀与总结​

二、语法​

2.1 父组件​

2.2 子组件​