跳转至

关于插槽写法

在 Vue.js 的模板语法中，v-slot 和 #default 都是用于定义插槽内容的语法，但它们在表达方式上稍有不同。让我们分别看看它们的含义以及差异。

1. v-slot="{ row }"

  • 解释：
  • v-slot 是 Vue 2.6+ 引入的一个新的插槽语法，用于定义命名插槽或默认插槽的内容。
  • { row } 是解构语法，用于从插槽的作用域对象中提取 row 数据。

  • 这里的 v-slot 是指向 el-table-column 的默认插槽（默认插槽就是没有名字的插槽）。

  • 等价写法： 

    <template v-slot:default="{ row }">
  <!-- 插槽内容 -->
</template>
    如果是默认插槽，可以省略 default，直接写成 v-slot="{ row }"。

2. #default="{ row }"

  • 解释：
  • # 是 v-slot 的简写形式，是 Vue 2.6+ 为了简化插槽语法而提供的语法糖。
  • #default 明确表示这是一个默认插槽，等价于 v-slot:default。

  • { row } 依然是解构插槽的作用域对象，提取出 row。

  • 等价写法： 

    <template v-slot:default="{ row }">
  <!-- 插槽内容 -->
</template>

区别

  1. 写法不同：
  2. v-slot="{ row }" 是更具可读性的完整写法。

  3. #default="{ row }" 是简写，适用于默认插槽。

  4. 功能上没有本质区别，两者在作用和功能上是完全等价的。

  5. v-slot 可以显式指定插槽名称，例如 v-slot:header。
  6. 简写 # 只能用于默认插槽或具名插槽（例如 #header）。

示例对比

使用 v-slot 的完整写法：

<el-table-column label="状态">
  <template v-slot="{ row }">
    <el-tag v-if="row.dictStatus == 1">正常</el-tag>
    <el-tag v-else type="danger">停用</el-tag>
  </template>
</el-table-column>

使用 # 的简写：

<el-table-column label="状态">
  <template #default="{ row }">
    <el-tag v-if="row.dictStatus == 1">正常</el-tag>
    <el-tag v-else type="danger">停用</el-tag>
  </template>
</el-table-column>

总结

  • v-slot 是完整的标准写法，语义清晰，推荐用于复杂的场景。
  • #default 是简写形式，更加简洁，推荐用于默认插槽的简单场景。
  • 二者完全等效，可以根据团队的代码风格或个人习惯选择使用。