详解Vue组件之作用域插槽

一、插槽（slot）简介

插槽是组件的一块HTML模板，它的显示与隐藏以及怎样显示由父组件来决定。插槽模板是一个空壳子，因为其内容（即显示与隐藏的html模板）由父组件控制。插槽在子组件template中的位置决定了父组件传过来的模板将来的显示位置。这使得组件的复用性更高，更加灵活。

二、作用域插槽的概念

作用域插槽其实是带数据的插槽。在父组件与子组件之间，我们可以利用作用域插槽传递数据。子组件可以通过绑定数据传递给父组件的插槽，这样父组件就可以根据这些数据定制自己的模板内容。

三 示例

假设我们有一个待办事项列表的子组件``，这个组件接收一个待办事项数组`todos`作为输入。对于每一个待办事项，我们都可以为其准备一个插槽，并将该待办事项对象作为插槽的属性传递出去。这样，父组件就可以为每个待办事项定制自己的模板内容了。具体示例代码如下：

子组件 ``的模板中：

```html

• {{ todo.text }}

```

父组件中使用 `` 的地方：

```html

``` 这里的 `slot-scope` 就相当于一个对象，包含了子组件通过插槽传递过来的数据。我们可以在这个作用域内使用这些数据来定制自己的模板内容。值得注意的是，从Vue 2.5.0开始，`slot-scope` 不再限制在 `