Skip to content

Commit

Permalink
组件内相同名字的<slot>可以使用任意多次、放在任意位置;传给某一个子组件相同名字的v-slot仅最后一个生效(不允许相同名字的…
Browse files Browse the repository at this point in the history
…`v-slot`。
  • Loading branch information
realgeoffrey committed Jul 27, 2024
1 parent 9803170 commit 4d854b2
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion 网站前端/Vue.js学习笔记/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@
e.g. `<button v-on="{ mousedown: doThis, mouseup: doThat }"/>`
6. `v-slot`(`v-slot:xx`缩写:`#xx`)插槽

只允许添加在`<template>`上(特例见下),且**不能~~嵌套~~使用**。子组件使用`<slot>`在内部插入父级引入的内容。
只允许添加在`<template>`上(特例见下),且**不能~~嵌套~~使用**,只允许在**引用子组件的顶级**使用(不允许在HTML标签)。子组件使用`<slot>`在内部插入父级引入的内容。

>`v-slot`只允许添加在`<template>`上的特例:被引用的子组件**只使用**默认插槽时,可以简写在引用的子组件上(若要使用多个插槽,则必须始终为所有的插槽使用完整的基于`<template>`的语法),e.g. 特例:`<子组件 v-slot:default="临时变量">`、`<子组件 v-slot="临时变量">`、`<子组件 #default="临时变量">`(若不使用临时变量则不需要加default在子组件上:默认所有未包含在具名插槽内的都是default插槽,除非有default具名插槽)。

Expand Down Expand Up @@ -460,6 +460,8 @@
<template v-for="(slotFunc, name) in $scopedSlots" v-slot:[name]="slotProps"> <!-- ①就近原则,写入<子子级>的v-slot -->
<slot :name="name" v-bind="slotProps" /> <!-- ②<slot>没有就近原则,仅是当前组件作用域功能 --><!-- ③slotProps是上层的临时变量 -->
</template>

<!-- 注意:v-slot同名的只生效最后一个、不具名的视作default的后备 -->
</子子级>
</div>
```
Expand Down

0 comments on commit 4d854b2

Please sign in to comment.