什麼是插槽？

插槽就是子元件中的提供給父元件使用的一個佔位符，用<slot></slot> 表示，父元件可以在這個佔位符中填充任何模板程式碼，如 HTML、

元件等，填充的內容會替換子元件的<slot></slot>標籤。

1.在子元件中放一個佔位符

2.在父元件中給這個佔位符填充內容

插槽的使用：

1.具名插槽：

具名插槽其實就是給插槽取個名字。一個子元件可以放多個插槽，而且可以放在不同的地方，而父元件填充內容時，可以根

據這個名字把內容填充到對應插槽中。

2.預設插槽：

預設插槽就是指沒有名字的插槽，子元件未定義的名字的插槽，父級將會把 未指定插槽的填充的內容填充到預設插槽中。

3.程式碼示例：

父元件：

<template>
<!--插槽：子元件中預留一個位置，由父元件指定這位置的內容-->
  <Son>
    我是父元件指定的內容
    <template v-slot:header>
      具名插槽內容
    </template>
    <template #footer>
      <!--  語法糖，插槽slot簡寫#-->
    </template>
  </Son>
</template>

<script>
import Son 
 
from "./components/Son.vue";
export default {
  name: 'App',
  components: {
    Son
  }
}
</script>

子元件：

<template>
    <h3>我是標題，下面是slot插槽</h3>
    <slot></slot>
    <!-- 匿名插槽-->
    <!-- 具名插槽-->
    <slot name="header"></slot>
    <slot name="
 
footer">
        父級不給內容，子級預設展示的內容
    </slot>
    <p>這是son元件末尾</p>
</template>

<script>
    export default {
        name: "Son"
    }
</script>

<style scoped>

</style>