Vue进阶之组件（二）

这一篇主要是讲slot。
我的另一篇在http://blog.csdn.net/sinat_25127047/article/details/53032430
另外文章开头还是要说一下，这一篇文章借鉴了很多 http://www.cnblogs.com/keepfool/p/5637834.html
这个博主写的vue真的很好，包括画的流程图，示意图都很好。

什么是slot

官网API的说法是：

在使用组件时，常常要像这样组合它们：
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>

注意两点：

组件不知道它的挂载点会有什么内容。挂载点的内容是由的父组件决定的。

组件很可能有它自己的模版。

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API ，参照了当前 Web组件规范草案，使用特殊的 元素作为原始内容的插槽。

先上一个demo

<div id="app">
        <my-component>
            <h1>Hello Vue.js!</h1>
        </my-component>
        <my-component></my-component>
    </div>
    <template id="myComponent">
        <div class="content">
            <h2>This is Component</h2>
            <slot>如果没有分发内容，则显示slot中的内容</slot>
            <p>Say Something....</p>
        </div>
    </template>

Vue.component('my-component', {
    template: '#myComponent'
})
new Vue({
    el: '#app'
})