插槽給子組件增加內容，插槽可以設置默認值
在子組件中template中插槽寫法 <slot></slot>
slot標簽內可以添加name屬性，要與html中的slot值對應起來
（要是子組件html之間沒有寫內容，又想顯示某個值，可以使用slot默認值：<slot>默認值</slot>）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插槽 slot</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <body-content> <div slot="header">header</div> <div slot="footer">footer</div> </body-content> </div> <script> Vue.component("bodyContent",{ template:`<div> <slot name='header'></slot> <div>content</div> <slot name='footer'></slot> </div>` }); var app = new Vue({ el:'#app' }) </script> </body> </html>
作用域插槽
作用域插槽必須是一個以template開頭和結尾的內容
插槽要聲明從子組件接受的數據是放到slot-scope的值中
<div id="app"> <child> <template> <li slot-scope="props">{{props.item}}</li> </template> </child> </div> <script> Vue.component("child",{ data:function(){ return { list:[1,2,3,4] } }, template:`<div> <ul> <slot v-for="item in list" :item=item></slot> </ul> </div>` }); var app = new Vue({ el:'#app' }) </script>