在介紹 slot 之前，我們需要先了解元件的編譯作用域：

元件的編譯作用域

多數程式語言都會有變數作用範圍的概念，而我們就可以將編譯作用域想像成「元件的 scope」。例如當外層元件與內層元件的 data 都有相同名稱的屬性時：

const app = Vue.createApp({
  data() {
    return {
      msg: 'Parent !'
    }
  }
});

app.component('custom-component', {
  template: `<div>Hello!</div>`,
  data () {
    return {
      msg: 'Child!'
    }
  }
});

由以上程式碼可以看到，內外元件都各自擁有 msg 這個 data 屬性，但內外層的 msg 實際上是兩種不同的屬性。

假如將模板內容更改一下：

<div id="app">
  <h1>{{ msg }}</h1>
  <custom-component>
    {{ msg }}
  </custom-component>
</div>

這樣就會讓外層的 <h1></h1> 會出現父層的 Parent !

而在子層內的 <custom-component> 內的 {{ msg }} 則會被 <custom-component> 原本所定義的 template 模板內容所取代：

<div id="app">
  <h1>{{ msg }}</h1>

 <custom-component>
    {{ msg }}
 </custom-component>
</div>

這是由於 Vue.js 在編譯元件的模板 (template) 時，會以元件模板的所定義內容為主。 也就是說，即使在 <custom-component> 內放入任何內容， Vue.js 在元件編譯成網頁模板的時候，會自動無視裡面的東西，並且以子元件的模板來替換掉。

Slot

slot 在官方文件的名稱叫做「插槽」，其作用是由外層元件將內容置放在至子層元件指定的位置中，來看看範例：

app.component('custom-component', {
  template: `<div> 
    Hello!
    <div>
      <slot></slot>
    </div>
  </div>`,
  data () {
    return {
      msg: 'Child !'
    }
  }
});

我們可以在 customComponent 加上一個 slot 標籤：

<custom-component>
  {{ msg }}
</custom-component>

來看看網頁的表現：

原本應該定義在父層元件的 Parent，就會出現在子層元件的 slot 標籤位置，這是因為 slot 的特性是保留一個空間可以從外部傳入內容，但子元件本身不會有控制權。

那我們今天對於 Vue Slot 插槽的介紹就到這裡結束了
我們明天見囉！謝謝各位