Vue提供了一种内容分发技术，可将父组件中的内容传递给子组件的模板，实现方式参照了Web组件规范草案。

一、插槽

　　Vue内置了一个<slot>元素，能作为插槽（slot）存在，而插槽内可包含文本、HTML片段、组件等。以下面的btn组件为例，其模板中包含一个<slot>元素，在DOM中为btn组件添加了文本内容。

<btn>提交</btn><script>   Vue.component("btn", {     template: '<button><slot></slot></button>'   }); </script>

　　渲染出的<button>元素会包含“提交”，即插槽被替换成了分发的内容，如下所示。

<button>提交</button>

　　在插槽中允许添加默认的内容（即为<slot>元素附加内容，如下所示），当父组件没有传递内容时，它们就会被渲染。

Vue.component("btn", {   template: '<button><slot>提交</slot></button>' });

二、具名插槽

　　具名插槽是指包含名称的插槽，即指定了name特性的<slot>元素。当组件的模板中需要多个插槽时，就得通过名称来加以区分。例如有一个page组件，包含三个<slot>元素，其中有两个声明了name特性，如下所示。

Vue.component("page", {   template: `<div>        <header><slot name="header"></slot></header>        <section><slot></slot></section>        <footer><slot name="footer"></slot></footer>    </div>`});

　　如果要向具名插槽传递内容，那么可以在<template>元素上使用v-slot指令，并让插槽名称成为它的参数，如下所示。

<page>  <template v-slot:header>    <h1>头部</h1>  </template>  <p>内容</p>  <template v-slot:footer>    <h1>尾部</h1>  </template></page>

　　渲染出的DOM结构如下所示，分发的内容替换了对应的插槽。

<div>  <header>    <h1>头部</h1>  </header>  <section>    <p>内容</p>  </section>  <footer>    <h1>尾部</h1>  </footer></div>

　　所有没有被包裹在带v-slot指令的<template>元素中的内容（例如上面的<p>元素），都会传递给没有名称的插槽（即默认插槽）。

　　注意，一个不带name特性的<slot>元素，其实也有名称，叫default。在v-slot指令中，也可以对其进行指定，如下所示。

&