Vue2.6插槽v-slot是如何使用的

slot種類：

　　匿名插槽、具名插槽、作用域插槽

子組件ChildrenHasSlot.vue:

<template>
  <div>
    我是子組件ChildrenHasSlot.vue
    <slot>我是默認值</slot>
    <slot name="chacaoB">我是chacaoB默認值</slot>
    <slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默認值</slot>
    <slot name="chacaoD" :data1="data1" :data2="data2">我是chacaoD默認值</slot>
  </div>
</template>

<script>
export default {
  name: "ChildrenHasSlot",
  data() {
    return {
      data1: {
        a: 111,
        b: 222
      },
      data2: {
        c: 333,
        d: 444
      }
    }
  }
}
</script>

 

父組件ParentDemoSlot.vue 

<template>
  <div>
    <ChildrenHasSlot>

      <!-- 匿名插槽 -->
      <template v-slot:default>
        <h4>這是插入'默認'插槽的內容</h4>
      </template>

      <!-- 具名插槽 -->
      <template v-slot:chacaoB>
        <h4>這是插入插槽B的內容</h4>
      </template>

      <!-- 作用域插槽 -->
      <template v-slot:chacaoC="slotProps">
        <h4>這是插入插槽C的內容</h4>
        <h4>{{slotProps}}</h4>
        <h4>data1數據：{{slotProps.data1}}</h4>
        <h4>data2數據：{{slotProps.data2}}</h4>
      </template>

      <!-- 作用域插槽 解構slot傳值 -->
      <template v-slot:chacaoD="{data1,data2}">
        <h4>這是插入插槽D的內容</h4>
        <h4>data1數據：{{data1}}</h4>
        <h4>data2數據：{{data2}}</h4>
      </template>

    </ChildrenHasSlot>
  </div>
</template>

<script>
import ChildrenHasSlot from "@/components/ChildrenHasSlot";

export default {
  name: "ParentDemoSlot",
  components: {
    ChildrenHasSlot
  },
  data() {
    return {}
  }
}
</script>

 

 

 

 

 

 

1. 匿名插槽：

子組件定義占位：

<slot>我是默認值</slot>

 

父組件使用：

方式1：

<template v-slot:default>
 <h4>這是插入'默認'插槽的內容</h4>
</template>

 

等價於

方式2：defalut可以省略，加上只是為了更直觀理解

<template v-slot>
 <h4>這是插入'默認'插槽的內容</h4>
</template>

 

 

2. 具名插槽（有具體名字的插槽）：

子組件定義占位：

<slot name="chacaoB">我是chacaoB默認值</slot>

 

父組件使用：

<template v-slot:chacaoB>
  <h4>這是插入插槽B的內容</h4>
</template>

 

3.作用域插槽（可從子組件插槽傳值到父組件插槽使用處）：

子組件定義占位：

<slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默認值</slot>

 

父組件使用：

<template v-slot:chacaoC="slotProps">
  <h4>這是插入插槽C的內容</h4>
  <h4>{{slotProps}}</h4>
  <h4>data1數據：{{slotProps.data1}}</h4>
  <h4>data2數據：{{slotProps.data2}}</h4>
</template>

TIPS: slotProps的名字不是必須的指定的名稱，可以DIY

 

當然也可以用ES6的解構出這些數據這樣：

<template v-slot:chacaoD="{data1,data2}">
  <h4>這是插入插槽D的內容</h4>
  <h4>data1數據：{{data1}}</h4>
  <h4>data2數據：{{data2}}</h4>
</template>

TIPS：slotProps代表子組件通過插槽傳遞的所有data數據，因為我們傳遞了2個分別是data1、data2，所以，slotProps是這樣的:
{ "data1": { "a": 111, "b": 222 }, "data2": { "c": 333, "d": 444 } }