Vue 中的插槽使用

前言

在 Vue 项目中，使用到 slot、slot-scope 的情况很多，特别是在表格中，但是官方文档说的不太容易理解，所以写这篇文章来记录一下我的学习成果。

匿名插槽

匿名插槽不具有 name 属性，在组建中最多只能有一个。

// child.vue
<template>
  <div class="child">
    <slot></slot>
</template>

// father.vue
<child>
  This is slot content
</child>

这样，在父组件中就能够通过匿名插槽渲染内容。

具名插槽

省略掉

作用域插槽

在 2.6.0 以后的版本已废弃的写法：

// child.vue
<template>
  <div class="child">
    <slot name="test" :uer="user"></slot>
</template>

<script>
export default {
  data() {
    return {
      user: ['Rain', 'Cruise', 'XiaoMing']
    }
  }
}
</script>

<child>
  <template slot="test" slot-scope="scope">
    {{ scope.user }}
  </template>
</child>