Vue-slot插槽

忘是亡心i 2022-04-23 07:56 310阅读 0赞

### **1、插槽内容 ** ###

![20190125111259437.png][]

在 slot 位置，可以包含任何模板代码，也包括 HTML：

甚至，slot 位置也能包含其他组件：

如果 `<navigation-link>` **完全没有** `<slot>` 元素，则 slot 位置传递的所有内容都会被直接丢弃。

### 2、命名插槽（named slot） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

还有一个未命名插槽(unnamed slot)，这是默认插槽，它是用于放置所有不匹配内容的插槽位置。

### 3、默认插槽内容（default slot content） ###

### 4、编译时的作用域（compilation scope） ###

当你在 slot 内部想要使用当前作用域下的数据，例如：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;navigation-link url="/profile"&gt;
  Logged in as {
       { user.name }}
&lt;/navigation-link&gt;
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

这些插槽内容，可以访问与插槽模板之外其余部分模板，完全相同的实例属性（也就是处于同一“作用域”）。然而插槽内容**无法**访问 `<navigation-link>` 组件内部的作用域。例如，试图访问传入此组件内部的 `url`，就会无法正常运行。牢记准则：

> 父组件模板的内容，全部在父组件作用域内编译；子组件模板的内容，全部在子组件作用域内编译。

### 5、作用域插槽  ###

在某些场景中，需要提供一个具有「可以访问组件内部数据的可复用插槽(reusable slot)」的组件。例如，一个简单的 `<todo-list>` 组件，可能包含如下模板：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;ul&gt;
  &lt;li
    v-for="todo in todos"
    v-bind:key="todo.id"
  &gt;
    {
       { todo.text }}
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

但是在我们应用程序的某些部分中，我们想要将 todo items 中的每一项，都渲染为不同于 `todo.text` 的内容。这就是引入作用域插槽的原因。

在 2.5.0+，`slot-scope` 不再局限于 `<template>` 元素，而是可以在任何元素或任何组件中的插槽内容上使用。

**5.1解构slot-scope**

`slot-scope` 的值，实际上可以接收任何有效的 JavaScript 表达式，可以出现在函数定义中的参数所在位置。

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;todo-list v-bind:todos="todos"&gt;
  &lt;template slot-scope="{ todo }"&gt;
    &lt;span v-if="todo.isComplete"&gt;✓&lt;/span&gt;
    {
       { todo.text }}
  &lt;/template&gt;
&lt;/todo-list&gt;
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

这是让作用域插槽用法，变得思路清晰的好方法。

[20190125111259437.png]: /images/20220323/1076103244d04eed80c99385dff75233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220323/a9f074faa18548e98f51c9f8682b87f3.png