这一篇主要是讲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'
})