13：vue3 插槽 slot

1、插槽基础知识

用Parent.vue，导入SlotBase.vue组件

 1 <template>
 2     <SlotBase>
 3         <div>
 4             <h3>插槽标题</h3>
 5             <p>插槽内容</p>
 6         </div>
 7     </SlotBase>
 8 </template>
 9 
10 <script>
11 import SlotBase from './SlotBase.vue';
12 export default{
13     components:{
14         SlotBase
15     }
16 }
17 </script>

SlotBase.vue组件内容

1 <template>
2    <h3>插槽基础知识</h3>
3    <slot></slot>
4 </template>

2、默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容。

Parent.vue的SlotBase为空

1 <template>
2     <SlotBase></SlotBase>
3 </template>

SlotBase.vue组件内容可以写默认值

1 <template>
2    <h3>插槽基础知识</h3>
3    <slot>默认值</slot>
4 </template>

3、具名插槽

有时在一个组件中包含多个插槽出口是很有用的。

对于这种场景，<slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

 Parent.vue内容

 1 <template>
 2     <SlotBase>
 3         <template v-slot:header>
 4             <p>header</p>
 5         </template>
 6         <template #main>
 7             <p>main</p>
 8         </template>
 9         <template v-slot:footer>
10             <p>footer</p>
11         </template>
12     </SlotBase>
13 </template>
14 
15 <script>
16 import SlotBase from './SlotBase.vue';
17 export default{
18     components:{
19         SlotBase
20     }
21 }
22 </script>

SlotBase.vue组件内容

1 <template>
2    <slot name="header"></slot>
3    
4    <slot name="main"></slot>
5 </template>

4、作用域插槽

然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

 Parent.vue内容

 1 <template>
 2     <SlotBase v-slot="slotProps">
 3         作用域插槽内容:<br>
 4        {{ slotProps.msg }}-{{ slotProps.count }}
 5     </SlotBase>
 6 </template>
 7 
 8 <script>
 9 import SlotBase from './SlotBase.vue';
10 export default{
11     components:{
12         SlotBase
13     }
14 }
15 </script>

SlotBase.vue内容

 1 <template>
 2    <slot :msg="message" :count="1"></slot>
 3 </template>
 4 <script>
 5 export default{
 6     data(){
 7         return{
 8             message:"myMsg内容"
 9         }
10     }
11 }
12 </script>

5、具名作用域插槽

具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到：v-slot:header="slotProps"。当使用缩写时是这样：#header="slotProps"

 Parent.vue内容

 1 <template>
 2     具名作用域插槽<br>
 3     <SlotBase>
 4         <template v-slot:header="slotProps" >
 5            <p>Header:{{ slotProps.msg }}-{{ slotProps.count }}</p>
 6         </template>
 7        <template #main="slotProps">
 8            <p>Main: {{ slotProps.job }}</p>
 9         </template>
10     </SlotBase>
11 </template>
12 
13 <script>
14 import SlotBase from './SlotBase.vue';
15 export default{
16     components:{
17         SlotBase
18     }
19 }
20 </script>

SlotBase.vue内容

 1 <template>
 2    <slot name="header" :msg="message" :count="1"></slot>
 3    <slot name="main" :job="jobMsg"></slot>
 4 </template>
 5 <script>
 6 export default{
 7     data(){
 8         return{
 9             message:"myMsg内容",
10             jobMsg:"iT的工作"
11         }
12     }
13 }
14 </script>