vue中的作用域插槽

摘要

本文介绍了 Vue2.0中作用域插槽的格式，示例及工作原理。

要阅读本文，你需要了解插槽，具名插槽，父子组件等相关概念。

内容

1. 作用
2. 格式
3. 示例
4. 图示原理
5. 理解
6. 应用
7. 小结

作用

让插槽内容能够访问子组件中的数据。

格式

格式分成两块来介绍，一是定义子组件时的格式，二是在父组件中使用时的格式。

定义子组件时，在slot上绑定props

在父组件中使用子组件时，插槽容器上通过slot-scope来接收 子组件中插槽抛出来的数据。​​​​​​​

示例

如下是一段示例代码，我们先定义一个子组件​​​​​​​

要点是，在默认插槽slot上给它绑定了一个名为num的属性，这就是要我们要回传给使用这个插槽的容器的数据。

下边是使用这个子组件的示例代码​​​​​​​

执行结果如下：

显然，num是在子组件内部定义的数据，而我们在父组件中使用子组件时，所传给插槽的内容 

nihao-{{scope.num}}

 就实现访问子组件中的数据的效果。

图示

上面的例子，我们可以通过如下的图示来说明

上面的图示是插槽的最基础的使用：在父组件中传结构给子组件。

接下来，我们看作用域插槽的效果：

在子组件内，给slot绑定属性，然后在父组件中，通过slot-scope来收集这些属性， 收集之再根据具体的业务逻辑来组装内容，填充子组件的插槽区域。

说明如下：

• 在子组件中，内部的数据包含 props，data，computed等等，这些数据都可以正常地绑定在slot上。
• 在子组件中，slot上可以绑定多个属性， 这些属性会自动被收集到父组件中slot-scope后面指定的对象scope上，假设子组件上是

  <slot :num="num" :a="1"></slot>

   ,则父组件scope的值是 

  {num: 100, a: 1}

• 在子组件中，slot也可以是具名插槽。

理解

作用域插槽让父子组件在使用时更加灵活。

• 父传子，传数据。

<子组件 :prop1="num1"></子组件>
           

• 父传子，传结构。​​​​​​​

<子组件>              <template>              自定义结构,这里可以访问父组件中的数据              </template>              </子组件>
           

• 父传子，传结构，根据子组件的中的数据传结构。​​​​​​​

<子组件>              <template slot-scope="dataFromSon">              自定义结构,这里可以访问子组件回传的数据dataFromSon              </template>              </子组件>
           

应用

在我目前的开发经历中，我并没有直接用到作用域插槽（如果我后面用到了，再来补充）。不过，在使用第三方的UI组件时，还是接触到很多的，例如element-ui中的表格组件：

链接地址：https://element.eleme.cn/#/zh-CN/component/table#zi-ding-yi-lie-mo-ban

小结

本文介绍了vue中的作用域插槽的作用，格式，并给出一个简单的示例，还画了原理示意图，希望对你有帮助。