插槽

基本概述

1. 插槽是為未來可能傳入的信息，預留位置的一個占位符
2. 插槽可以設置默認的內容，類似ES6形參默認值
3. 具名插槽
   • 子組件可以定義多個插槽，每個插槽取個名字，父組件根據名字向插槽中傳數據
   • 注意 v-slot 只能添加在 template 標簽 上 (只有一種例外情況)
4. 作用域插槽
   • 默認情況下，插槽中定義的數據是當前實例的數據；因此，要想讓其他組件訪問到插槽組件內定義的數據，就需要在插槽組件的插槽上暴露出數據。
   • 單個插槽
     • 插槽組件通過:data="data"暴露數據
     • 父組件（可以在插槽組件標簽上）通過v-slot:default="slotProps"來獲取插槽組件數據
   • 多個插槽（那就是有具名插槽）
     • 插槽組件通過:data="data"暴露數據，name="god"提供插槽名稱
     • 父組件（不可以在插槽組件標簽上，只能在template模板標簽上）通過v-slot:god="slotProps"來獲取具名插槽組件數據!
5. 其他
   • 插槽簡寫
     • v-slot 也有縮寫，即把參數之前的所有內容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header
   • 作用域插槽解構賦值
     • 例如v-slot:default="sonData"，可以對sonData直接進行ES6對象解構；v-slot:default="{ reason }"
   • 動態插槽名
     • 正常 v-slot:slotName -> 動態 v-slot:[slotName]
   • slot-scope等過時語法
     • https://cn.vuejs.org/v2/guide/components-slots.html#廢棄了的語法

默認內容

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <!-- 向插槽中傳遞內容 -->
    <Son> <h1>我是默認傳到子組件插槽中的內容</h1> </Son>
  </div>
</template>

<script>
import Son from "./SonItem.vue";
</script>


// 子組件

<template>
  <div>
    <p>我是兒子組件</p>
    <!-- 提供一個插槽的默認值 -->
    <slot>沒人向我的插槽里傳數據的話，我默認就是??</slot>
  </div>
</template>

具名插槽

// 父組件
<template>
  <div>
    <p>我是dad</p>
    <!-- 根據名字向插槽中傳遞內容(亂序) -->
    <Son>
      <template v-slot:dog>柴犬</template>
      <template v-slot:giao>小啊giao</template>
      <template v-slot:pig>搖搖豬</template>
    </Son>
  </div>
</template>

<script>
import Son from "./SonItem.vue";
</script>


// 子組件

<template>
  <div>
    <p>我是兒子組件</p>
    <slot name="pig">我是??</slot>
    <slot name="dog">我是??</slot>
    <slot name="giao">我是giao</slot>
  </div>
</template>

作用域插槽

// 父組件

// 情況一：只有一個插槽
<template>
  <div>
    <p>我是dad</p>
    <!-- 只有一個插槽，可以在組件標簽上這樣傳遞；-->
    <!-- 可以簡寫v-bind="sonData"；-->
    <Son v-slot:default="sonData">
      {{ "為什么會被天蝎男拒絕呢？" + sonData.reason }}
      {{ "為什么會被一聊天他就去洗澡呢？" + sonData.reason }}
      {{ "為什么這么久都沒有對象呢？" + sonData.reason }}
    </Son>
  </div>
</template>

// 情況二：有多個插槽（存在具名插槽）
<template>
  <div>
    <p>我是dad</p>
    <!-- 不可以在組件標簽上使用v-slot，只能使用template -->
    <Son>
      <template v-slot:default="sonData">
        {{ "為什么會被天蝎男拒絕呢？" + sonData.reason }}
        {{ "為什么會被一聊天他就去洗澡呢？" + sonData.reason }}
        {{ "為什么這么久都沒有對象呢？" + sonData.reason }}
        {{ "為什么這么久都沒有對象呢？" + sonData.reason }}
      </template>

      <!-- 通過v-slot:插槽名稱="數據對象" 來獲取數據；-->
      <template v-slot:god="data">
        {{ data.excuse }}
      </template>
    </Son>
  </div>
</template>




// 子組件

<template>
  <div>
    <p>我是兒子組件</p>
    <slot :reason="reason"></slot>
    <!-- 有多個插槽
    <slot :excuse="excuse" name="god"></slot> 
    -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: "還不是因為你長的不好看",
      excuse: "窮",
    };
  },
};
</script>

打牢基礎，一步一個腳印，慢就是快，越慢越快