有时你想要构建一个可以用来放置其他组件的组件。你可能想要建立一个通用的模式对话框组件,让你的用户编写对话框的文本。或者你想在一个组件中使用通用的布局，内容使用其他的元素进行填充。Slots就是这样一种方式：在一个组件中有个固定的结构，将组件中指定的部分的内容委托给其父组件。
How to do it
为了提高猫的士气，俄罗斯黑手党猫决定用一个web页面来展示本月最佳员工，并决定使用vue组件来完成此功能。
他们聘请你为主要的开发人员帮助他们编写如下的组件：
Vue.component('framed', { template: `<div class="frame"> <h3>Russian cat mafia employee of the month</h3> <slot>Nothing framed.</slot> </div>` }); 其中，slot标签标识占位符，在父类模板中，你将放置一些内容在里面。当然我们可以先给这个组件添加点样式：
.frame { border: 5px dashed dodgerblue; width: 300px; } h3 { font-family: sans-serif; text-align: center; padding: 2px 0; width: 100%; } HTML：
<div id="app"> <framed> <cat :name="catName"></cat> </framed> </div> 请注意如何在frame组件中放置另外一个组件。其中cat组件如下所示：
Vue.component('cat', { template: `<div> <figure> <img src="http://lorempixel.com/220/220/cats/"/> <figcaption>{{name}}</figcaption> </figure> </div>`, props: ['name'] }); 每当有一个页面请求时，将随机加载一张宽为220px、高220px的猫的图像。 给figcaption添加样式：
h3, figcaption { font-family: sans-serif; text-align: center; padding: 2px 0; width: 100%; } Vue实例代码如下：
new Vue({ el: '#app', data: { names: ['Murzik', 'Pushok', 'Barsik', 'Vaska', 'Matroskin'] }, computed: { catName () { return this.names[Math.floor(Math.random() * this.names.length)] } } }) 启动应用，你将会发现本月最佳员工：
本文翻译来自：Vue.js Codebook
