使用slots进行内容分发

有时你想要构建一个可以用来放置其他组件的组件。你可能想要建立一个通用的模式对话框组件,让你的用户编写对话框的文本。或者你想在一个组件中使用通用的布局，内容使用其他的元素进行填充。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