自己这段时间在自学vue.js，发现关于插槽这方面，官方文档中，没有详细的讲解使用方法与示例，我自己试着来总结了一下。然后根据官方文档写了几个使用插槽的例子。每个例子都要引入vue.js。示例中上面为HTML代码，下面为JavaScript代码。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
一、单个插槽：
1 <div id="exp1">2 ????<my-com></my-com>3 </div>
1 <script type="text/javascript"> 2 ????//单个插槽 3 ????//子组件，备用内容在子组件的作用域内编译，并且只有在宿主元素为空时，且没有要插入的内容时才显示备用内容 4 ????Vue.component(‘child-com‘,{ 5 ????????template:‘<div><h2>我是子组件的标题</h2>‘ + 6 ????????‘<slot>只有在没有要分发的内容时才会显示</slot>‘ + 7 ????????‘</div>‘ 8 ????}); 9 ????//父组件10 ????Vue.component(‘my-com‘,{11 ????????template:‘<div><h1>我是父组件的标题</h1>‘ +12 ????????‘<child-com>‘ +13 ????????‘<p>这是一些初始内容</p>‘ +14 ????????‘<p>这是另外一些初始内容</p>‘ +15 ????????‘</child-com>‘ +16 ????????‘</div>‘17 ????});18 ????var exp1 = new Vue({19 ????????el:‘#exp1‘20 ????})21 </script>二、具名插槽：
<div id="exp1"> ???<parent-com></parent-com></div>
1 <script type="text/javascript"> 2 ????//子组件 3 ????Vue.component(‘app-layout‘,{ 4 ????????template:‘‘ + 5 ????????‘<div class="container">‘ + 6 ????????‘ ??<header>‘ + 7 ????????‘ ??????<slot name="header"></slot>‘ + 8 ????????‘ ??</header>‘ + 9 ????????‘ ??<main>‘ +10 ????????‘ ??????<slot></slot>‘ +11 ????????‘ ??</main>‘ +12 ????????‘ ??<footer>‘ +13 ????????‘ ??????<slot name="footer"></slot>‘ +14 ????????‘ ??</footer>‘ +15 ????????‘</div>‘16 ????});17 ????//父组件18 ????Vue.component(‘parent-com‘,{19 ????????template:‘‘ +20 ????????‘<app-layout>‘ +21 ????????‘ ??<h1 slot="header">这是一个页面的标题</h1>‘ +22 ????????‘ ??<p>主要内容的一个段落</p>‘ +23 ????????‘ ??<p>主要内容的另外一个段落</p>‘ +24 ????????‘ ??<p slot="footer">这是一些页脚信息</p>‘ +25 ????????‘</app-layout>‘26 ????});27 ????var exp1 = new Vue({28 ????????el:‘#exp1‘29 ????})30 </script>三、作用域插槽：
<div id="exp1"> ???<parent-com></parent-com></div>
1 <script type="text/javascript"> 2 ????//子组件 3 ????//代表性的列表组件模块 4 ????Vue.component(‘child-com‘,{ 5 ????????template:‘‘ + 6 ????????‘<ul>‘ + 7 ????????‘ ??<slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>‘ + 8 ????????‘</ul>‘, 9 ????????data:function(){10 ????????????return {11 ????????????????animal:[12 ????????????????????{name:‘大象‘},13 ????????????????????{name:‘小狗‘},14 ????????????????????{name:‘小猫‘},15 ????????????????????{name:‘老虎‘}16 ????????????????]17 ????????????}18 ????????}19 ????});20 ????//父组件21 ????// 在父组件的模板里，使用一个Vue自带的特殊组件<template> ，22 ????// 并在该组件上使用scope属性，值是一个临时的变量，存着的是由子组件传过来的23 ????// prop对象，在下面的例子中我把他命名为props。24 ????// ?获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。25 ????Vue.component(‘parent-com‘,{26 ????????template:‘‘ +27 ????????‘<div class="container">‘ +28 ????????‘<p>动物列表</p>‘ +29 ????????‘<child-com>‘ +30 ????????‘ ??<template scope="props" slot="child-ul">‘ +31 ????????‘ ??????<li class="child-ul">{{ props.text }}</li>‘ +32 ????????‘ ??</template>‘ +33 ????????‘</child-com>‘ +34 ????????‘</div>‘35 ????});36 ????//这个<div class="container"></div>是必须的，不然会发生编译错误37 ????var exp1 = new Vue({38 ????????el:‘#exp1‘39 ????})40 </script>这是我在学习官方文档，然后在网络上查找信息后，做的一些总结，欢迎指正。
vue.js-使用插槽分发内容的三个示例
原文地址：http://www.cnblogs.com/XmanLin/p/7667670.html