# Vue學習#19 v-slot
###### tags: `Vue 直播班 - 2022 春季班`

## 元件的編譯作用域

之前所學的知識都告訴我們，每個元件資料都是獨立的，就算 data 屬性名稱相同但是不同元件還是算不同屬性

但是!

模版內容出現了某種情況呢?

[模版內容](https://codepen.io/binlandz123/pen/poaGVpV?editors=1010)

這個範例的重點是

<card> {{ mes }} </card> //  mes: 'child'

<!-- card 元件 template  內容  '<div> card 元件內容 </div>' -->

你可以看到元件的模板已經有內容了，但是在使用這個元件時，又在標籤內去渲染 {{ mes }}

{{ mes }} 這個元件的 data 資料並不會被渲染，而是會被 template 模版內容取代

### 原因

Vue 在編譯元件的 template 模板時，會以<font color='red'>元件模板所定義內容為主</font>，當元件從 created 進入了 beforeMount 階段時，會將網頁的模板進行編譯。

所以我們在元件 <card></card> 標籤內加入渲染內容，Vue 在元件編譯成網頁模板的時候會自動無視裡面的東西，並用子元件的內容來替換

所以當我們想要用別的內容來決定子元件的 template 長什麼樣子的話就需要使用 `v-slot`

## 什麼是 v-slot

可以藉由外層元件將內容決定子元件 template 模板的結構長什麼樣子

## 使用方法
1. 在元件的 template 模板加入 `<slot></slot>` 標籤
2. 在 HTML 的元件標籤加入你想加入的標籤 EX: `<p></p>`
就完成了!!!

### [slot 簡單範例](https://codepen.io/binlandz123/pen/KKZjWoJ)

## 具名插巢
可以使用多個 `slot` 但是如果想要內容都不同的話，使用 `template` 標籤並將 slot 加上 `name` ，讓 slot 對應相對應的標籤
### 具名插巢使用方法
1. slot 標籤加入 name ， ex: `<slot name="g1">`
2. 在 HTML 加入 `template` 標籤，並將 slot 的 name 寫在 template 標籤中 ， ex: `<template v-slot:g1></template>`
3. 如果想在 slot 加內容就寫在 template標籤中吧
4. 承第二步， `<template v-slot:g1></template>` 可以將 `v-slot:g1` 縮寫成 `#g1`

### [具名插巢](https://codepen.io/binlandz123/pen/vYpqmOd)

## 元件插巢 Props
可以將元件內部的資料透過 `props` 來給外層來使用
### 注意!
**這裡跟 父子元件之間用的 `props` 不太相同**
父子元件間的 `props` 是將父元件資料傳給子元件做使用，而這裡的 `props` 是指將內部元件的資料傳給外部的 slot 的地方來做使用
### slotProps 使用方法
1. 在元件 `template` 模板的 slot 標籤加入 `:porpsName="內部元件 data"`，不須向父子元件 props 那樣先宣告
2. 在 html 的 元件標籤的 `<template v-slot:default="slotProps">`，在 slot 名稱後方加入一個自定義的 props 名稱
3. 接下來只要透過渲染這個自定義的 props 名稱就可以抓到資料哩

### slotProps 可以傳入多值

1. 在元件 `template` 模板的 slot 標籤加入多個 props
2. slotprops 可以傳入多值只需要將 `<template v-slot:default="slotProps">` ， 把 `slotprops` 改成 `{}` 物件的形式並放入

### [slotProps](https://codepen.io/binlandz123/pen/KKZjqpa)