vue3之插槽

插槽，顾名思义，就是一个插座，留个空，给你自定义填写一些东西，这个一般是放在组件里面。

先说最简单的默认插槽吧，直接上代码

直接一个slot标签，就表示插槽了，如果给slot加上一个name属性，那么就是具名插槽了，下面都有例子，在使用具名插槽时，需要注意语法，就是template v-slot:xxxx ,这个记住就行了。

//modal.js   子组件
<template>
  <div class="modal">
    <button @click="close">关闭</button>
<!-- 默认插槽，可以设置默认值-->
    <slot>我就是默认值</slot>  
<!-- 具名插槽-->
    <slot name="header"></slot>
  </div>
</template>

//父组件

<template>

<Modal v-model:show="show" v-show="show">
  <p>我是插槽的内容{{counter}}</p>
  <template v-slot:header>
    <p>我就是具名插槽啦</p>
  </template>
</Modal>

</template>

稍微麻烦一点的就是作用域插槽了，因为父子组件的作用域是区分开的，如果在父组件中引入了子组件，然后插槽里面需要使用子组件里面的数据，这时候就有问题了，此时作用于插槽就排上用场了，其实这个做法也是跟具名插槽一个套路，就是给slot标签上添加自定义的属性，用来传递数据。请看下面的例子

下面说明一下：

子组件用插槽的时候，用了两种，一是默认的插槽，二是具名插槽

看在父组件中使用的时候，前面v-slot:xxx这个就是具名插槽的写法，后面的等于多少就是相当于自定义的一个变量来接收传递过来的数据，这个例子中使用了test和testData两个变量，然后下面使用的时候呢，就是test.item，注意，这个item就是子组件定义的字段名，这个对应上就行了。这里如果不想在父组件中自定义字段，那么可以使用结构来获取传递的参数。

简写，v-slot可以简写成#

 1 //子组件，SlotTemp.vue
 2 <template>
 3   <div class="slot-temp">
 4     <div v-for="val in pop" :key="val.name">
 5       <slot :item="val"></slot>
 6       <slot name="header" :itm="val"></slot>
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12 export default {
13   name: 'SlotTemp',
14   data () {
15     return {
16       pop: [
17         {
18           name: '小明',
19           age: 12
20         },
21         {
22           name: '小米',
23           age: 13
24         },
25         {
26           name: '小猪',
27           age: 25
28         }
29       ]
30     }
31   }
32 }
33 </script>
34 
35 //父组件
36 <template>
41  <SlotTemp>
42       <template v-slot:default="test">
43         <span class="green">{{ test.item }}</span>
44       </template>
45       <template v-slot:header="testData">
46         <span>{{testData.itm}}--haha</span>
47       </template>

45       <template v-slot:header="{itm}">
46         <span>{{itm}}--haha</span>
47       </template>

 48 </SlotTemp>
39 </template>