插槽在模板与 JSX 中的用法

长念阅读约 5 分钟2 年前发布2 年前编辑

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

template 中插槽的写法

slot

默认插槽可省略或使用 slot="default"

<template>
  <el-button loading>
    <!-- 默认/匿名插槽 -->
    <template> Custom Button Text </template>
    <!-- 具名插槽 -->
    <template slot="loading"> 🐳 </template>
  </el-button>
</template>

slot-scope

作用域插槽 slot-scope 是用于子组件向外部传递参数的。

默认插槽可省略或使用 slot="default"

<template>
  <el-table>
    <el-table-column>
      <!-- 默认/匿名插槽 -->
      <template slot-scope="{row, column, $index}"> {{ $index+1 }} {{row.id}} </template>
      <!-- 具名插槽 -->
      <template name="userName" slot-scope="{row, column, $index}">
        {{ $index+1 }} {{row.userName}}
      </template>
    </el-table-column>
  </el-table>
</template>

v-slot

v-slot 是 2.6.0 版本引入用来替代 slot 和 slot-scope 的，所以之后的版本推荐直接使用 v-slot。
语法为：v-slot:[slot-name]="[scope-data-name]"，可使用解构。

默认插槽可省略或使用 v-slot 或使用 v-slot:default

<template>
  <el-button loading>
    <template> Custom Button Text </template>
    <template v-slot:loading> 🐳 </template>
  </el-button>
  <el-table>
    <el-table-column>
      <!-- 默认/匿名插槽 -->
      <template v-slot="{row, column, $index}"> {{ $index+1 }} {{row.id}} </template>
      <!-- 具名插槽 -->
      <template v-slot:userName="{row, column, $index}"> {{ $index+1 }} {{row.userName}} </template>
    </el-table-column>
  </el-table>
</template>

# 简写

默认插槽可省略或使用 #default

<template>
  <el-button loading>
    <template #default> Custom Button Text </template>
    <template #loading> 🐳 </template>
  </el-button>
  <el-table>
    <el-table-column>
      <!-- 默认/匿名插槽 -->
      <template #default="{row, column, $index}"> {{ $index+1 }} {{row.id}} </template>
      <!-- 具名插槽 -->
      <template #userName="{row, column, $index}"> {{ $index+1 }} {{row.userName}} </template>
    </el-table-column>
  </el-table>
</template>

JSX 中插槽写法

import { defineComponent } from 'vue';

export default defineComponent(() => {
  return () => (
    <el-button
      loading
      v-slots={{
        default: () => 'Custom Button Text',
        loading: () => '🐳',
        {/* 作用域插槽 */}
        withProps: (props) => {
          return <span>{props.title}</span>;
        },
      }}
    />
  );
});