使用slots进行内容分发

有时你想要构建一个可以用来放置其他组件的组件。你可能想要建立一个通用的模式对话框组件,让你的用户编写对话框的文本。或者你想在一个组件中使用通用的布局，内容使用其他的元素进行填充。Slots就是这样一种方式：在一个组件中有个固定的结构，将组件中指定的部分的内容委托给其父组件。

How to do it

为了提高猫的士气，俄罗斯黑手党猫决定用一个web页面来展示本月最佳员工，并决定使用vue组件来完成此功能。

      他们聘请你为主要的开发人员帮助他们编写如下的组件：

Vue.component('framed', {template: `<div class="frame"><h3>Russian cat mafiaemployee 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