gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson10
一 插槽内容
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <!--插槽--> <div id="app1"> <navigation-link> <font-awesome-icon></font-awesome-icon> </navigation-link> </div> </body> <script src="../js/vue.js"></script> <script> Vue.component('navigation-link',{ template:'<div><a href="https://www.baidu.com">百度一下</a><slot></slot></div>' }); Vue.component('font-awesome-icon',{ template:'<span>另一个组件</span>' }); new Vue({ el:'#app1' }) </script> </html>
当组件渲染的时候，这个 <slot> 元素将会被替换为<font-awesome-icon>组件内的内容。插槽内可以包含字符串以及任何模板代码，包括 HTML。如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。
注意：如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。
二 具名插槽
有些时候我们需要用到多个插槽，对于这样的情况，我们可以用以下两种方式。
举例（方法一）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index2</title> </head> <body> <div id="app2"> <group-assembly-temp> <template slot="header"> //向具名插槽提供内容 <h1>头部</h1> </template> <template slot="main"> <h1>主体内容</h1> </template> <template slot="footer"> <h1>尾部</h1> </template> </group-assembly-temp> </div> </body> <script src="../js/vue.js"></script> <script> var groupAssemblyTemp = { template:`<div class="container"> <header> <slot name="header"></slot> //定义插槽 </header> <main> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>` }; new Vue({ el:'#app2', components:{ 'group-assembly-temp':groupAssemblyTemp } }) </script> </html>
在这里，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽，在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot 特性
举例（方法二）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index3</title> </head> <body> <div id="app3"> <group-assembly-temp> <h1 slot="header">Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </group-assembly-temp> </div> </body> <script src="../js/vue.js"></script> <script> var groupAssemblyTemp = { template:`<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>` }; new Vue({ el:'#app3', components:{ 'group-assembly-temp':groupAssemblyTemp } }) </script> </html>
在这里，我们是直接把slot 特性直接用到一个普通元素上。
默认插槽
我们也可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index3</title> </head> <body> <div id="app3"> <group-assembly-temp> <h1 slot="header">Here might be a page title</h1> //默认插槽内容 <p>A paragraph for the main content.-----默认插槽</p> <p>And another one.-----默认插槽</p> <p>Here's some contact info-----默认插槽</p> <p slot="footer">Here's some contact info</p> </group-assembly-temp> </div> </body> <script src="../js/vue.js"></script> <script> var groupAssemblyTemp = { //定义一个未命名插槽 template:`<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>` }; new Vue({ el:'#app3', components:{ 'group-assembly-temp':groupAssemblyTemp } }) </script> </html>
三 插槽的默认内容
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index4</title> <style> .container{ width:600px; height:500px; border:1px solid red; } </style> </head> <!--定义插槽的默认内容--> <body> <div id="app4"> <default-con-slot></default-con-slot> </div> </body> <script src="../js/vue.js"></script> <script> var defaultConSlot = { template:` <div class="container"> <slot>默认插槽内容</slot> </div> ` }; new Vue({ el:'#app4', components:{ 'default-con-slot':defaultConSlot } }) </script> </html>
有时候为插槽提供默认内容是很有用的，比如上述默认显示“默认插槽内容”，但是这个时候我向<default-con-slot></default-con-slot>里面插入内容，便会把原有的内容覆写。
四 作用域插槽
之前有学过，但是感觉当时听的也是半懂不懂的所以之后出来工作也就很少用，这次在公司里正好蹭下一次需求还没澄清有点时间，从vue官方文档一步一步的把很多知识点不管是以前会的还是不会的都整理了一下，希望后面能够坚持用，把自己的代码基础提一步起来。。。。
首先我们先举一个简单的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index5</title> <style> li{ list-style:none; } </style> </head> <body> <div id="app5"> <blog-test v-bind:todos="todos"> <template slot-scope="list"> {{list}} </template> </blog-test> </div> </body> <script src="../js/vue.js"></script> <script> /** * 作用域插槽 * */ var blogTest = { props:['todos'], template:` <ul> <li v-for="todo in todos" v-bind:key="todo.id" > <slot :arr="todo"></slot> </li> </ul> ` }; new Vue({ el:'#app5', data:{ todos:[ {id:1,name:'孙悟空'}, {id:2,name:'猪八戒'}, {id:3,name:'沙和尚'}, {id:4,name:'唐僧'}, {id:5,name:'小白龙'} ] }, components:{ 'blog-test':blogTest } }) </script> </html>
作用：主要用于有时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。为了让这个特性成为可能，你需要做的全部事情就是将数据包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽；然后在使用这个组件的时候，我们可以通过 slot-scope 特性从子组件获取数据。
注意：在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。