Vue 的作用域插槽的用法

在某些场景下,需要让插槽中的内容能够访问子组件中才有的数据。

一、场景代码

有一个带有如下模板的 <list> 组件:

<template>
  <slot name="action" v-bind:action="user"></slot>
</template>

页面代码如下:

<list>
    <template v-slot:action="{ action }">
        <el-button size="mini" icon="el-icon-view" type="primary" @click="handleEdit(action)"></el-button>
        <el-button size="mini" icon="el-icon-delete-solid" type="danger" @click="handleRemove(action.id)"></el-button>
    </template>
</list>

从上面代码可以看出,为了让 action 在父级的插槽内容中可用,我将 user 作为 <slot> 元素的一个特性绑定到了组件上面。因此,绑定在 <slot> 上的特性被称为 插槽 prop。而且,在父级作用域中,我们可以给 v-lot 附带一个值(上面代码中便是 action )来定义我们提供的插槽 prop 的名字。

观察上面代码,可以看出,这种写法是具名插槽,当然也可以使用默认插槽:

<list>
    <template v-slot:default="{ action }">
        <el-button size="mini" icon="el-icon-view" type="primary" @click="handleEdit(action)"></el-button>
        <el-button size="mini" icon="el-icon-delete-solid" type="danger" @click="handleRemove(action.id)"></el-button>
    </template>
</list>

这种写法还可以更简单些,不带参数 v-slot 被假定对应默认插槽:

<list>
    <template v-slot="{ action }">
        <el-button size="mini" icon="el-icon-view" type="primary" @click="handleEdit(action)"></el-button>
        <el-button size="mini" icon="el-icon-delete-solid" type="danger" @click="handleRemove(action.id)"></el-button>
    </template>
</list>

二、其他事项

注意:

  1. 默认插槽的缩写语法 不能 和具名插槽混用,会导致作用域不明确;
  2. 如果出现多个插槽,须为_所有的 _插槽使用完整的基于 <template> 的语法。

另外:
关于 Vue 的作用域插槽的详细描述,可查看官方文档:作用于插槽