默认插槽、具名插槽和作用域插槽

从字面上理解，插槽就像是子组件留给使用它的父组件的一个空位，具体要放些什么，由父页面决定，即在子组件中预留了几个位置，供给父组件自由插入想要放置的内容，因此，使用插槽可以使得我们封装的组件更加的灵活，拓展性、通用性也更高。

一个组件中只能有一个默认插槽，可以放在任何位置，不需要设置name。

<slot></slot>

一个组件可以有多个具名插槽，需要设置name属性。

// child.vue
<slot name="hello"></slot>

1
2

父组件中使用这个具名插槽的方式：

<child>
  <div slot='hello'>xxx</div>
<child>

1
2
3

作用域插槽就是自身带有数据插槽，即子组件中定义好了数据，并且绑定在了某个作用域插槽上，父组件使用的时候可以获取到这个数据并进行自定义展示。

// child.vue
<slot name='user' :list='list'></slot>

data() {
  return {
    list: [1,2,3,4,5]
  }
}

1
2
3
4
5
6
7
8

父组件中使用这个具名插槽的方式：

<child>
  <div name='user' slot-scope="user">
    {{ user.list }}
  </div>
<child>

1
2
3
4
5