vue组件中的API有三个，分别是props，events与slot。前两个分别为传参和触发事件，slot实现的是内容分发。最近使用elementUI中的组合搜索框或者添加其他自定义内容时会用到此属性。它相当于AngularJS中的transclusion，意为插槽。

  vue中的组件，可谓是相当重要的内容。slot的主要作用就是组件的组合，用来扩展组件。简单来说：

  这样将两个自定义的组件组合起来，父组件<bigbig>也许会有自己的模板，这样<smallsmall>在里面就很尴尬，它需要一个明确的定义如何显示。此时便需要使用slot。

现在我们要渲染以下代码：

将显示什么结果呢？答案是先显示“我是组件里自带的段落~”再显示“我是需要渲染的内容~”。因为我们已经将其插入slot中了，并替换掉了slot中的内容。如果我们没有需要插入的内容，则会显示slot原本中的内容“如果没有需要插入的内容，就显示我啦~”

它的含义简单来说就是带有名字的slot。当插槽不止一个时，为了区分他们，则需要带上名字，用法和单个slot本质上是一样的。

渲染结果为：111 code 222 。对应名称插入到对应的插槽。

作用域插槽本质上是可以传递数据的插槽，类似于函数的传参。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。以下示例代码为转载：