vue2.6之後的 v-slot插槽

1、背景

在 vue2.6.0 中，引入了v-slot 指令，取代了 slot 和 slot-scope 屬性，
並且v-slot只能使用在template上。

2、作用

在引入元件時，通過在template元素上使用v-slot實現了內容的封裝，
而在使用時則將 <slot>元素作為封裝元素的出口。

3、具名插槽的用法示例

一個不帶 name 的 出口會帶有隱含的名字“default”，

具名插槽的縮寫 例： v-slot: header 縮寫為 #header，注意#後面必須有值，如果是預設的插槽，縮寫為#default。
預設插槽，不寫<template v-slot:default ></template>，即不包括在template內的就是預設插槽的內容

//定義元件A，引入插槽
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>      // 這裡沒定義name，那其name就是default.
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// 在其它元件內，引入元件A時，定義slot插槽的內容，引入進寫法如下
<A>
  <template #header>
    <h1>Here might be a page title</h1>  // 這個插槽內是html
  </template>
    
  // 這裡沒有包含在template,其預設的就是name為default的slot
  // <template v-slot:default>   // 這個可以省略
      <p>A paragraph for the main content.</p>   
      <p>And another one.</p>
  //</template>   // 這個可以省略

  <template v-slot:footer>
       <B></B>                  // 這個插槽內是另一個元件B
  </template>
</A>

4、插槽的預設內容

在slot中寫入內容，則可作為引入元件時，若未設定相應插槽時，該插槽的預設內容

// 定義一個 <submit-button> 元件
<button type="submit">
  <slot>Submit</slot>
</button>

//引入元件，沒有定義插槽內容，則使用slot中的預設內容，渲染為
//<button type="submit"> Submit </button>
<submit-button></submit-button>   

//引入元件，定義插槽內容，則替換預設內容，渲染為
// <button type="submit"> Save </button>
<submit-button>  Save </submit-button>

5、在父元件呼叫子元件，引入子元件時的插槽處，使用子元件的資料

在父元件內定義插槽時，插槽內可以訪問到父元件內的資料，無法訪問到子元件內的資料。

而在子元件為插槽定義預設內容時，只可以訪問到子元件內的資料，如果想訪問父元件內的資料時，當然可以通過父元件傳遞給子元件資料的方法進行訪問。

父級模板裡的所有內容都是在父級作用域中編譯的；
子模板裡的所有內容都是在子作用域中編譯的。

• 在子元件的slot處v-bind繫結屬性
• 在你元件的template中定義slot時，使用 v-slot:插槽名 = 插槽處繫結的屬性，即可

// 子元件 <current-user>
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

// 在父元件內引入子元件 <current-user>，只有預設插槽時，縮寫為
<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

// 其實完整寫法如下：（引入多個插槽時，一一對應即可）
<current-user>
  // <template #default="slotProps">     // 這裡把v-slot:縮寫為#，
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

參考連結：https://cn.vuejs.org/v2/guide/components-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9