vue的插槽

vue官网的插槽例子，现记录熟悉一下：

一、插槽内容

父组件：

 1 <template>
 2   <div>
 3     <navigation-link url="/profile">
 4       Your Profile
 5     </navigation-link>
 6     <br>
 7     <navigation-link url="/profile">
 8       <Icon type="ios-checkmark" size="16"/>
 9       <span>Your Profile</span>
10     </navigation-link>
11   </div>
12 </template>
13 <script>
14   import NavigationLink from '@/components/NavigationLink';
15   export default {
16     components:{
17       NavigationLink
18     },
19     data(){
20       return {
21       }
22     }
23   }
24 </script>

子组件：

 1 <template>
 2   <a :href="url" class="nav-link">
 3     <slot></slot>
 4   </a>
 5 </template>
 6 <script>
 7     export default {
 8         name: "NavigationLink",
 9         props: {
10           href:{
11             type:String,
12             default:''
13           }
14         },
15     }
16 </script>

渲染的页面：

上面的代码可以看出，slot就是把组件NavigationLink起始标签之间的内容显示出来，如果子组件没有包含<slot></slot>元素，NavigationLink起始标签之间的内容将没有任何意义

二、编译作用域

 1 <template>
 2   <div>
 3     <navigation-link url="/profile">
 4       以用户名{{ user.name }}登录
 5     </navigation-link>
 6     <br>
 7     <navigation-link url="/profile">
 8       点击此处将发送到: {{ url }}
 9       <!--这里的 `url` 会是 undefined，因为 "/profile" 是_传递给_ <navigation-link> 的
10       而不是在 <navigation-link> 组件内部定义的-->
11     </navigation-link>
12   </div>
13 </template>
14 <script>
15   import NavigationLink from '@/components/NavigationLink';
16   export default {
17     components:{
18       NavigationLink
19     },
20     data(){
21       return {
22         user:{
23           name:'admin'
24         }
25       }
26     }
27   }
28 </script>

渲染的页面：

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

三、后备内容

以字面理解，就是替补的意思，正式球员在的话，就是替补，正式球员不在，替补上场，同样，组件标签之间如果提供内容，就会渲染提供的内容，否则渲染后备（默认的）内容，后备内容在子组件中设置，与父子传参的子组件props接收父组件传的参数设置默认值有些相似：

父组件：

 1 <template>
 2   <div>
 3     <submit-button></submit-button>
 4   </div>
 5 </template>
 6 <script>
 7   import SubmitButton from '@/components/SubmitButton';
 8   export default {
 9     components:{
10       SubmitButton
11     },
12     data(){
13       return {
14       }
15     }
16   }
17 </script>

子组件：

 1 <template>
 2   <div>
 3     <button type="submit">
 4       <slot>Submit</slot>
 5     </button>
 6   </div>
 7 </template>
 8 <script>
 9     export default {
10         name: "SubmitButton"
11     }
12 </script>

渲染页面：

四、具名插槽

在一个组件里面，有时我们需要多个插槽，如何区分并正确出我们想要的页面，这时需要用到具名插槽

父组件

 1 <template>
 2   <div>
 3     <base-layout>
 4       <template v-slot:header>
 5         <h1>这是一篇文章标题</h1>
 6       </template>
 7 
 8       <!--任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容并显示在不带slot的内容中-->
 9       <p>这是一篇文章内容</p>
10 
11       <template v-slot:footer>
12         <p>这是一些文章底部信息</p>
13       </template>
14     </base-layout>
15   </div>
16 </template>
17 <script>
18   import BaseLayout from '@/components/BaseLayout';
19   export default {
20     components:{
21       BaseLayout
22     },
23     data(){
24       return {
25       }
26     }
27   }
28 </script>

子组件：

 1 <template>
 2   <div class="container">
 3     <header>
 4       <slot name="header"></slot>
 5     </header>
 6     <main>
 7       <slot></slot>
 8       <!--一个不带 name 的 <slot> 出口会带有隐含的名字“default”-->
 9     </main>
10     <footer>
11       <slot name="footer"></slot>
12     </footer>
13   </div>
14 </template>
15 <script>
16     export default {
17         name: "BaseLayout"
18     }
19 </script>

页面的渲染：

如果父组件默认区域改为

1 <!--任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容并显示在不带slot的内容中-->
2 <p>这是一篇文章内容</p>
3 <!--<template> 中包裹默认插槽的内容，就只会显示这包裹的默认内容，上面的将不会显示-->
4 <template v-slot:default>
5    <p>这是一篇文章的另一个内容</p>
6 </template>

此时页面显示：

有此可以看出，还是以配置的v-slot:default为准，配置了这个v-slot:default，父组件中没有包裹在带v-slot的template标签中的内容都会丢失

五、作用域插槽

子组件：

 1 <template>
 2     <span>
 3       <!--为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去-->
 4       <slot v-bind:user="user">
 5         {{ user.lastName }}
 6       </slot>
 7     </span>
 8 </template>
 9 <script>
10     export default {
11         name: "CurrentUser",
12         data(){
13           return {
14             user:{
15               firstName:'Tom',
16               lastName:'Green'
17             }
18           }
19         }
20     }
21 </script>

子组件的属性值user.firstName想让父组件获取并覆盖掉插槽后备内容user.lastName,可以将user作为一个属性绑定到 <slot> 上，绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：在示例中我们将包含所有插槽 prop 的对象命名为 slotProps

父组件：

 1 <template>
 2   <div>
 3     <current-user>
 4       <template v-slot:default="slotProps">
 5         {{ slotProps.user.firstName }}
 6       </template>
 7     </current-user>
 8   </div>
 9 </template>
10 <script>
11   import CurrentUser from '@/components/CurrentUser';
12   export default {
13     components:{
14       CurrentUser
15     },
16   }
17 </script>

页面显示：

　　五（一）、独占默认插槽的缩写写法

　 在上述示父组件情况下，当被提供的内容只有默认插槽时，组件的标签current-user才可以被当作插槽的模板template来使用。这样我们就可以把 v-slot 直接用在组件上：

1 <current-user v-slot:default="slotProps">
2   {{ slotProps.user.firstName }}
3 </current-user>

　　这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽

1 <current-user v-slot="slotProps">
2   {{ slotProps.user.firstName }}
3 </current-user>

　　说白了，就是父组件里面的写法可以精简为最后那种写法，实现的效果是一样的，只就是缩写写法，但是需要注意的是一旦出现具名插槽，就不能用缩写写法，就要老老实实写完整的基于 <template> 的语法，每个插槽都要指明所用插槽的名称

　　五（二）、解构插槽Prop

　　父组件：

 1 <template>
 2   <div>
 3     <!--解构user-->
 4     <current-user v-slot="{ user }">
 5       {{ user.firstName }}
 6     </current-user>
 7     <!--将person重命名为people-->
 8     <current-user v-slot="{ person: people }">
 9       {{ people.lastName }}
10     </current-user>
11     <!--以下的写法直接编译报错-->
12     <current-user v-slot="{ user = { firstName: 'Guest' } }">
13       {{ user.firstName }}
14     </current-user>
15     <!--改为这种写法，并不能输出值-->
16     <current-user #default="{ person = { firstName: 'Guest' } }">
17       {{ person.firstName }}
18     </current-user>
19   </div>
20 </template>
21 <script>
22   import CurrentUser from '@/components/CurrentUser';
23   export default {
24     components:{
25       CurrentUser
26     },
27   }
28 </script>

子组件：

 1 <template>
 2     <span>
 3       <slot v-bind:user="user" v-bind:person="person">
 4         {{ user.lastName }}
 5       </slot>
 6     </span>
 7 </template>
 8 <script>
 9     export default {
10         name: "CurrentUser",
11         data(){
12           return {
13             user:{
14               firstName:'Tom',
15               lastName:'Green'
16             },
17             person:{
18               lastName:'Smith'
19             }
20           }
21         }
22     }
23 </script>

官网给的覆盖后备内容的解构写法，用于插槽子组件的person的prop 是 undefined 的情形：

1 <current-user v-slot="{ user = { firstName: 'Guest' } }">
2   {{ user.firstName }}
3 </current-user>

编译报错，去网上百度解决方法，有人说改成简写形式

1 <current-user #default="{ user = { firstName: 'Guest' } }">
2   {{ user.firstName }}
3 </current-user>

确实不报错了，但是也不输出值'Guest'，如果有哪位大佬有解决方法，欢迎评论

六、动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

1 <base-layout>
2   <template v-slot:[dynamicSlotName]>
3     ...
4   </template>
5 </base-layout>

父组件：

 1 <template>
 2   <div>
 3     <base-layout>
 4       <template v-slot:[header]="headerProp">
 5         <h1>{{headerProp.header.content}}</h1>
 6       </template>
 7       <template v-slot:[def]="defaultProp">
 8         <p>{{defaultProp.def.content}}</p>
 9       </template>
10       <template v-slot:[footer]="footerProp">
11         <p>{{footerProp.footer.content}}</p>
12       </template>
13     </base-layout>
14   </div>
15 </template>
16 <script>
17   import BaseLayout from '@/components/BaseLayout';
18   export default {
19     components:{
20       BaseLayout
21     },
22     data(){
23       return {
24         header:'header',
25         def:'default',
26         footer:'footer'
27       }
28     }
29   }
30 </script>

子组件：

 1 <template>
 2   <div class="container">
 3     <header>
 4       <slot name="header" v-bind:header="header"></slot>
 5     </header>
 6     <main>
 7       <slot v-bind:def="def"></slot>
 8     </main>
 9     <footer>
10       <slot name="footer" v-bind:footer="footer"></slot>
11     </footer>
12   </div>
13 </template>
14 
15 <script>
16     export default {
17         name: "BaseLayout",
18         data(){
19           return {
20             header:{
21               name:'header',
22               content:'这是标题'
23             },
24             def:{
25               name:'default',
26               content:'这是内容'
27             },
28             footer:{
29               name:'footer',
30               content:'这是底部信息'
31             }
32           }
33         }
34     }
35 </script>
36 
37 <style scoped>
38 
39 </style>

页面显示：