Vue插槽

1. 插槽内容

   • 简单的插槽：slot标签内会渲染出"插槽内容"

     <div id="app">
         <p>{{message}}</p>
         <item-list :items='items'>
             插槽内容
         </item-list>
     </div>
     <script>
         Vue.component('item-list', {
             props:['items'],
             template:`
                 <div>
                     <ul>
                         <li v-for='item in items'>{{item}}</li>
                     </ul>
                     <slot></slot>
                 </div>
             `,
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'列表',
                 }
             },
         })
     </script>
     

   • 编译作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

     <div id="app">
         <p>{{message}}</p>
         <item-list :items='items'>
             <!-- 依然渲染的是"列表" -->
             {{message}}
         </item-list>
     </div>
     <script>
         Vue.component('item-list', {
             props:['items'],
             template:`
                 <div>
                     <ul>
                         <li v-for='item in items'>{{item}}</li>
                     </ul>
                     <slot></slot>
                 </div>
             `,
             data(){
                 return {
                     message:'aaaaaa'
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'列表',
                 }
             },
         })
     </script>
     

   • 默认内容

     <div id="app">
         <p>{{message}}</p>
         <item-list :items='items'>
             <!-- 没有内容，默认显示子组件slot标签内的内容,有内容则优先显示这里的内容 -->
         </item-list>
     </div>
     <script>
         Vue.component('item-list', {
             props:['items'],
             template:`
                 <div>
                     <ul>
                         <li v-for='item in items'>{{item}}</li>
                     </ul>
                     <slot>{{message}}</slot>
                 </div>
             `,
             data(){
                 return {
                     message:'aaaaaa'
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'列表',
                 }
             },
         })
     </script>
     

2. 具名插槽

   • <slot> 元素的name属性 可以用来定义额外的插槽

     <div id="app">
         <p>{{message}}</p>
         <item-list :items='items'>
             <template v-solt:header>
                 <p>header</p>
             </template>
             <p>main</p>
             <template v-solt:footer>
                 <p>footer</p>
             </template>
         </item-list>
     </div>
     <script>
         Vue.component('item-list', {
             props:['items'],
             template:`
                 <div>
                     <slot name='header'>
                     <slot><slot>
                     <slot name='footer'><slot>
                 </div>
             `,
             data(){
                 return {
                     message:'aaaaaa'
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'列表',
                 }
             },
         })
     </script>
     

   • 一个不带 name 的 <slot> 出口会带有隐含的名字“default”

     <template v-solt:default>
         <p>main</p>
     </template>
     

   • 注意 ：v-slot 只能添加在 <template> 上 (只有一种例外情况)

3. 作用域插槽

   • 插槽 prop

     <div id="app">
         <p>{{message}}</p>
         <item-list>
             <template v-slot:default="slotProps">
                 {{ slotProps.user.two }}
             </template>
         </item-list>
     </div>
     <script>
         Vue.component('item-list', {
             template:`
                 <div>
                     <slot :user='user'>{{user.one}}</slot>
                 </div>
             `,
             data(){
                 return {
                     user:{
                         one:'first',
                         two:'last'
                     }
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'列表',
                 }
             },
         })
     </script>
     

   • 独占默认插槽的缩写语法

     <item-list>
         <template v-slot:default="slotProps">
             {{ slotProps.user.two }}
         </template>
     </item-list>
     

     <item-list v-slot:default="slotProps">
        {{ slotProps.user.two }}
     </item-list>
     

   • 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确；只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

     <current-user>
       <template v-slot:default="slotProps">
         {{ slotProps.user.firstName }}
       </template>
     
       <template v-slot:other="otherSlotProps">
         ...
       </template>
     </current-user>
     

   • 解构插槽 Prop

     <item-list v-slot:default="{user}">
         {{ user.two }}
     </item-list>
     <!-- 指定默认值-->
     <item-list v-slot:default="{user = { two: 'Guest' }}">
         {{ user.two }}
     </item-list>
     

4. 其他

   • 动态插槽名

     <base-layout>
       <template v-slot:[dynamicSlotName]>
         ...
       </template>
     </base-layout>
     

   • 具名插槽的缩写：把参数之前的所有内容 (v-slot:) 替换为字符 #

     <base-layout>
       <template #header>
         <h1>Here might be a page title</h1>
       </template>
     	
       <template #default="{ user }">
         <p>{{ user.firstName }}</p>
       </template>
       
       <template #footer>
         <p>Here's some contact info</p>
       </template>
     </base-layout>