小桀
Antd与Vue的作用域插槽

Antd与Vue的作用域插槽

在学习Antd时，遇到了如下的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


<template>

  <a-table
      :columns="columns"
      :data-source="dataSource"
  >

    <!-- 关注点在此处 -->
    <template #headerCell="{column}">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{column,record}">

      <template v-if="column.key==='name'">
        <a>{{ record.name }}</a>
      </template>

      <template v-else-if="column.key==='tags'">
        <span>
          <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>

      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical"/>
          <a>Delete</a>
          <a-divider type="vertical"/>
          <a class="ant-dropdown-link">
            More actions
            <down-outlined/>
          </a>
        </span>
      </template>

    </template>
  </a-table>
</template>

突然忘记了关注点处的知识点，所以翻了一下官方文档，整理如下。

作用域插槽

有时让插槽的内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个非常常见的需求，我们希望能够自定义每个项目的渲染方式。

例如，我们有一个组件，包含一个代办项目列表：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


app.component('todo-list', {
  data() {
    return {
      items: ['Feed a cat', 'Buy milk']
    }
  },
  template: `
    <ul>
      <li v-for="(item, index) in items">
        {{ item }}
      </li>
    </ul>
  `
})

我们可能会想把{{item}}替换为<slot>，以便在父组件上对其自定义。

1
2
3
4
5
6


<todo-list>
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

但是，这是行不通的，因为只有在<todo-list>组件中可以访问item，且插槽内容是在它的父组件上提供的。要使item在父级提供的插槽内容上可用，我们可以添加一个<slot>元素并将其作为一个attribute绑定：

1
2
3
4
5
6
7


<ul>
  <li v-for="( item, index ) in items">
    <slot :item="item"></slot>
  </li>
</ul>

可以根据自己的需要将任意数量的attribute 绑定到slot上：

1
2
3
4
5
6
7


ul>
  <li v-for="( item, index ) in items">
    <slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
  </li>
</ul>

绑定在<slot>元素上的attribute被称为插槽prop。现在，在父级作用域中，我们可以使用带值的v-slot来定义我们提供的插槽prop的名字：

1
2
3
4
5
6
7
8
9



<todo-list>
  <template v-slot:default="slotProps">
    <i class="fas fa-check"></i>
    <span class="green">{{ slotProps.item }}</span>
  </template>
</todo-list>