Vue中的slot标签

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

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

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

1.单个slot

它的含义指的就是组件模板中包含一个slot。就上个例子来说，如果不包含，那么自己本身模板中的内容将会被抛弃，只显示。如果包含slot，那么将会插入的内容中并且替换掉它。标签中也可以携带内容，当没有内容插入时，将显示slot标签中的内容。举个例子：

假定组件有如下模板：

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

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

2.具名slot

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

假定组件有如下模板：

接下来渲染：

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

3.作用域插槽

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