背景：vue 專案中 經常會遇到好幾個頁面 公用一個元件 但是針對某一個地方可能顯示的內容不一樣，這個時候我們難道要再寫一個元件嗎？當然不！這個時候我們就用到了 slot 插槽！
簡言之，把你需要的內容 插到相應的位置...
下面介紹它的用法：
1.單個插槽
父元件
<navbar>
<div class="">
slot content
</div>
</navbar>
複製程式碼子元件
<template>
<div class="">
<slot>123</slot>
</div>
</template>
複製程式碼這個時候 頁面就會顯示 slot content
如果父元件裡沒有新增內容，就會顯示 123
2.命名插槽
父元件
<navbar>
<div slot="one">
<button type="button" name="button">454</button>
</div>
<div slot="two">
slot two
</div>
</navbar>
複製程式碼子元件
<template>
<div class="">
<slot name="one">one</slot>
<slot name="two">two</slot>
<slot>two2</slot>
</div>
</template>
複製程式碼頁面顯示
