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>